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.
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:
Magnets help ensure sleek screen movement and better user experience if your app includes lists.
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.
The following sections illustrate how a list behaves with and without a center magnet.
The behavior of a list with a center magnet is outlined below:
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.
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.
There is space around the right edge of the last item in the list that signifies the end of the list.
The various states that a list without a center magnet would go through are outlined below:
Notice the uneven space on the left; and right sides. There is no consistency regarding how the list items are placed.
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.
In the final state, a list without a magnet stops with uneven space on both edges.
The table below explains the use cases where magnets are currently supported:
|Type of View||Sub-type of View|
||List with ‘Move’ timeline|
|List with Cascade timeline|
|List with Carousel|
|List of Lists|
|List with expandable items|
|List with mixed items|
|List of mixed lists|
|Scrolling View||Scrolling Container View|
Here are some guidelines to follow when using magnets with lists.
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:
Therefore, you need to position the magnets 153 pixels away from either the left or right edges of the list.
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.
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.
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.
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.