Using Magnets to Control List Scrolling Behavior

Magnets allow designers to make list items snap to a particular position in a view when scrolled or panned. Without magnets, it’s difficult to create a smooth scrolling experience when scrolling or panning through lists.

Types of Magnets

There are four magnet types, and you can access each in the Properties section of the AE Properties Panel.

Edges and Center magnets:

Begin and End magnets:

Benefits of Using Magnets

Magnets help ensure sleek screen movement and better user experience if your app includes lists.

Center Magnet

Entering From Left; Right and Left Magnets

Entering From Right; Right and Left Magnets

A list without magnets would scroll arbitrarily. When you use magnets the logic behind the scrolling or panning ensures consistency for where the list item will stop.

Using Center Magnets

The following sections illustrate how a list behaves with and without a center magnet.

• List With Center Magnet
• List Without Center Magnet

List With Center Magnet

The behavior of a list with a center magnet is outlined below:

Initial State

You can see in the diagram below that, with the use of a magnet, the list knows how to align its items. There is even space on both sides of the central list item that makes it easy for the user to navigate the list.

1. The list is center-aligned.
2. The second list item follows the first list item, but the emphasis is still on the first list item, which is center-aligned to the magnet.
3. There is space on the left edge of the first list item that signifies that it is the first list item in the list. This makes it easier for users to identify the start of the list.

Scrolled State

When a list with center magnet is scrolled, both sides of the list items are evenly spaced. The emphasis is on the list item between the first and third list items.

1. Equal space on the left edge of the central list item.
2. List item aligned to the horizontal center magnet.
3. Equal space on the right edge of the central list item.

Final State

There is space around the right edge of the last item in the list that signifies the end of the list.

1. Space on the left edge of the last list item
2. Space on the right edge of the last list item signifies to users the end of the list.

List Without Center Magnet

The various states that a list without a center magnet would go through are outlined below:

Initial State

Notice the uneven space on the left; and right sides. There is no consistency regarding how the list items are placed.

1. There is no space around the left edge of the list.
2. The second list item is following the first list item and content is getting clipped in the second list item.

Scrolled State

State in which the scrolled list stops anywhere depending on how much force is applied when scrolling or panning. Image A shows the first scrolled position. Image B shows the second scroll position without magnets, list scrolling is inconsistent and unpredictable.

Image A

1. The second list item is clipped.
2. The first list item is clipped.

Image B

1. Neither the first nor second item can be viewed clearly.

Final State

In the final state, a list without a magnet stops with uneven space on both edges.

1. The second last list item is followed by the last list item, but content is clipped.
2. There is no space on the right edge.

Supported Use Cases With the AE plugin

The table below explains the use cases where magnets are currently supported:

Magnets Guidelines

Here are some guidelines to follow when using magnets with lists.

1. Use the Correct Magnet

Experiment to find out which type of magnet works best for your desired list or scrolling view. The image on the left displays selecting a center magnet. The image on the right displays left and right magnets.

You.i TV recommends that the position of right and left magnets in a list be at least equal to the width of the padding on a list item, plus the width of the list item. This is demonstrated in the following image:

In this case, we are using the following measurements:

• Padding of 20 pixels for each list item
• Width of 133 pixels per list item

Therefore, you need to position the magnets 153 pixels away from either the left or right edges of the list.

2. Avoid Edges

Avoid placing magnets at the right or left edge of a list as it may clip the list item’s edges. If you need to add magnets on edges, add a margin for the magnets.

• Do not use center magnets if you already have left and right magnets added to the list, and vice versa.
• Use the Draw Magnets widget in the Debug panel to view a magnet’s position.

To Access the Draw Magnets Widget

1. Open the Debug panel.
2. Click the View Outlines option.

3. Click the question mark (?) symbol on the right side of View Outlines to select the Draw Magnets widget.

   

On a 10ft platform, such as tvOS or Android TV, the list item position is set to the edges by default. However, on a handheld device such as a smartphone, you can disable magnets by selecting the Disable Magnet check box in the After Effects Properties panel.

You.i TV recommends using magnets for lists deployed on 10ft devices, because magnets improve focus. The edges do not get clipped, and you can see the center list item clearly as well as those on the sides.

For Developers

Magnets are primarily a designer’s feature. After the magnets are added in the After Effects files, a developer can use the exported assets as is. No code changes are required. In cases where an update is necessary, developers can ask the designer to make the required changes to the After Effects file (.aep), and then can use the updated assets directly in code.

Magnets Sample App

To understand more about magnets and to see how they behave in a real app, generate and build the Magnets sample app located in the You.i C++ package at ../samples/magnets Upload it on different platforms, such as iOS, tvOS, UWP, PS4, Xbox, or Android.