Common Magnet Use Cases

Magnets are powerful in creating a user-friendly experience. We’ve outlined some common use cases for magnets when building an app. Each use case provides an overview, why you should use magnets, and how to incorporate them. For each of the use cases, you can follow along with the supplied Magnets-Examples.aep file.

Case 1: Using a Single Magnet in a List

The most commonly used single magnet in a list is the center magnet, which is center-aligned with the list.

When used properly, magnets improve the user experience. When using a single magnet in a list, ensure that you know why you only need one magnet instead of two. There are many common scenarios where one magnet works well, such as when focus needs to be at center or left in a list.

Center Magnet: the list items entering from the left edge or the right edge snap to the horizontal middle of the list when scrolled.

Left Magnet: the list items entering from the left edge of a list will align to the begin magnet’s position.

Right Magnet: the list items entering from the right edge will align to the end magnet’s position.

To Add a Center Magnet

1. Open the Magnets-Examples.aep file and select the List-Magnets-Center composition in the After Effects timeline panel of the Magnets-Examples.aep file.

   

2. Select the Properties tab in the AE Properties panel.

3. Add the center magnet to the list.
   1. To add the magnet in the middle of a list, select Center from the dropdown menu in the Horizontal Magnets section.

   2. Enter an offset value of 0 for the center magnet.

      If you want the center magnet to be left or right-aligned, add a negative or positive offset value as required to achieve the desired effect. You can do the same for the center magnet in a vertical list.

4. Go to the Main composition.

5. Open the Composition menu and select You.i: Preview Current Composition to preview how the list behaves with the center magnet.

   Pro tip

   Press the M key on your keyboard to view the exact position of magnets in a list in the Preview panel.

To Add a Begin (Left) Magnet in a List

1. Open the Magnets-Examples.aep file and select the List-Magnets-Default composition in the After Effects timeline panel of the Magnets-Examples.aep file.

   

2. Select the Properties tab in the AE Properties Panel.

3. Add the Begin magnet to the list.

   1. To add the magnet at the beginning of a list, select Begin from the dropdown menu in the Horizontal Magnets section.

      Adding a begin magnet in a list aligns the content entering from the left edge of the list along the begin magnet’s position.

   2. Add the offset value for the begin magnet.

      When positioning the begin magnet in a list, consider the width of the list item and any padding. In this case, set the begin magnet’s offset value to 150 pixels.

4. Go to Main Composition.

5. Open the Composition menu and select You.i:Preview Current Composition to preview the list behavior.

To Add an End (Right) Magnet in a List

1. Open the Magnets-Examples.aep file and select the List-Magnets-Default composition in the After Effects timeline panel of the Magnets-Examples.aep file.

   

2. Select the Properties tab in the AE Properties Panel.

3. Add an End magnet to the list.
   1. To add a magnet at the end of the list, select End from the dropdown menu in the Horizontal Magnets section.

   2. Add the offset value for the End magnet.

      When positioning the right magnet in a list, consider the width of the list item and any padding involved. In this case, set the end magnet’s offset value to 150 pixels.

4. Go to Main Composition.

5. Click the Composition menu and select You.i:Preview Current Composition to preview the list behavior with the end magnet.

Case 2: Using Two Magnets in a List

Now that we’ve covered using a single magnet in a list, what about two? You can use right and left magnets in a horizontal list or up and down magnets in a vertical list.

You can add left and right magnets to a list container by setting offset values. You should always avoid using an offset of 0 for right and left magnets as it makes the magnets snap to the right and left edges of the list.

To Add Right and Left Magnets to a Horizontal List:

1. Open the Magnets-Examples.aep file and select the List-Magnets-Edge composition in the After Effects timeline panel of the Magnets-Examples.aep file.

   

2. Select the Properties tab in the AE Properties panel.

3. Add left and right magnets to the list.
   1. Select Edges from the dropdown menu in the Horizontal Magnets section.

   2. Add the offset value for the left and right magnets.

      The offset value for the left magnet represents how many number of pixels the left magnet should be from the left edge of the list. Similarly, the offset value of the right magnet represents how many pixels away the right magnet should be from the right edge of the list.

      

      Important

      Press the Return key on your keyboard each time you enter offset values for the magnets.  The offset values may be ignored if you do not press the Return key after entering them.

4. Go to the Main-Edges composition.

5. Click the Composition menu and select You.i: Preview Current Composition to preview how the list behaves with the left and right magnets.

   Pro tip

   For up and down magnets, follow the same steps as listed above. The offset value for the up magnet will be the number of pixels away from the uppermost edge of the vertical list. Similarly, the offset value for the down magnet will be the number of pixels away from the bottom-most edge of the vertical list.

Case 3: Adding Magnets in a List with Carousel Effect

The carousel effect makes a normal list infinitely scrollable. When the full list is scrolled, the list returns to the starting point. Before discussing magnets, let’s go over how to add the carousel effect to your list:

Use one of the following two options to add the carousel effect to a list:

1. Always Carousel: The view will use carousel regardless of whether the content is greater than the space available. If there is not enough content to fill the view, there will be gaps between rotations.
2. Carousel If Overflowing: The view will use carousel only when the amount of content surpasses the space available in the view.

Adding Magnets in a Carousel List

Add magnets to a carousel list the same way you add magnets to a list without a carousel. Use the List-magnets-Default composition in the After Effects file (Magnets-Examples.aep) and add carousel to the list before adding any of the magnets you want to try out.

Case 4: Adding Magnets to a List of Lists

A list of lists is a combination of sub-lists within a bigger, main list. Each sub-list inside of the main list is an independent entity and does not depend on other sub-lists or the main list for any of its characteristic or behavior.

Whenever magnets are added to a list of lists, be careful about where you place the magnets, especially for a 10ft device.

List of lists are most commonly used when each sub-list has different purpose, such as having sub-lists based on movie genre in case of an movie app, or game themes in case of a gaming app.

To Add Magnets to a Sub-list List

1. Open the Magnets-Examples.aep file.

2. Select the List-Magnets-Sublist composition in the After Effects timeline panel of the Magnets-Examples.aep file.

3. Select the Properties tab in the AE Properties panel.

4. Add left and right magnets or a center magnet to the list.

   Important

   After you enter offset values for magnets, make sure to press the Return key on the keyboard as sometimes the offset value may get ignored without the Return key.

   

   Pro tip

   Repeat steps 2-4 for all other List-Magnets-Sublist compositions, if you have more than one.

5. Magnets in each sub-list are independent of other magnets. You can position a magnet anywhere in each sub-list.

   

6. Go to the Main composition.

7. Click the Composition menu and select You.i: Preview Current Composition to preview how the list behave with the center magnet.

To Add Magnets to a List of Lists

1. Open the Magnets-Examples.aep file.

2. Select the List-Magnets-ListofLists composition in the After Effects timeline panel of the file.

3. Select the Properties tab in the You.i Properties panel.

4. Perform one of the following steps:

   1. If the layout of the composition is vertical, add an Edges magnet.

      

   2. If the layout of the composition is horizontal, add an Edges magnet.

5. Go to the Main Composition.

6. Click the Composition menu and select You.i: Preview Current Composition to preview the list behavior with magnets.

The diagram below illustrates the main list’s magnet location in a list of lists.

Case 5: Adding Magnets to a Grid List

Grid lists are lists that are displayed in a grid-style. They can be bi-directionally scrolled: horizontally and vertically. They may look similar to lists of lists, but there are some differences:

• Lists of lists have independent sub-lists. The behavior of the sub-lists is not dependent on the main list. On the other hand, grid lists do not have any sub-lists and everything connected to the grid list moves/scrolls together.
• In lists of lists, the scrolling direction of the sub-lists and the main list is never the same. However, grid lists scroll as one entity and can be scrolled vertically or horizontally.

Magnet Behavior in Grid Lists

Magnets can only be positioned horizontally or vertically in grid lists. The behavior of magnets in grid lists is outlined below:

• Left and right magnets - the list snaps to the magnet’s position when scrolled from left or right, respectively.
• Up and down magnets - the list snaps to the magnet’s position when scrolled up and down, respectively.
• Diagonal magnets are not supported with grid lists.

To Add Magnets to a Grid List

Do the following:

1. Open the Magnets-Examples.aep file.

2. Select the List-Magnets-Grid composition in the After Effects timeline panel in the file.

3. Select the Properties tab in the AE Properties panel.

4. Add one or more magnets to the grid list.

   You can add either add either a horizontal begin magnet or an end magnet, or both a left and right magnet. Similarly, you can add either a vertical begin or end magnet, or both an up and down magnet. In this example, we added left and right magnets at 100 pixels offset from the left and right edges. Up and down magnets are set at 100 pixels offset from the top and bottom edges.

   

5. Go to the Main composition.

6. Click the Composition menu and select You.i: Preview Current Composition to preview the list behavior with magnets.

   The following diagram illustrates a grid list with up, down, left, and right magnets.

   

   We can add magnets at the vertical center and the horizontal center. The following diagram shows a grid list with horizontal center and vertical center magnets.

   

Case 6: Adding Magnets to a Scrolling View

Scrolling view allows users to scroll or pan the content inside the view, either horizontally or vertically. When using a touch or cursor interface, users scroll by pressing and holding the content or by moving the cursor in the direction they want to scroll.

You can use scrolling view in cases where users are asked to view a large text block, such as Terms and Conditions or a license agreement.

Magnet Behavior in Scrolling View

When added to scrolling view, magnets force items to snap to position as the view is scrolled. If the view is configured with two horizontal magnets, the scrolling view aligns the left magnet with the closest left edge of a scrolling view item. Similarly, when content enters from the right, top, or bottom while scrolling, the scrolling view will align the right, up, and down magnets to the right, top and bottom edge of the closest scrolling view items. When the view has a single horizontal magnet, the view will snap to the closest center of a scrolling view item. The same is true for a single vertical magnet.

Both horizontal and vertical center magnets are positioned at the center of the view when the magnet’s offset value is zero. For horizontal center magnets, a positive offset value will move the magnet towards the right of the center, and a negative offset value will move the magnet towards the left of the center.

For vertical center magnets, a positive value will move the magnet towards the bottom of the center, and a negative value will move the magnet towards the top of the center.

The following images show scrolling view in its container with a center magnet:

To Add Magnets to Scrolling View

Do the following:

1. Open the Magnets-Examples.aep file.

2. Select the ScrollingView-Main composition in the After Effects timeline panel in the After Effects file.

3. Select the Properties tab in the AE Properties panel.

4. Do one of the following steps depending on the layout type:

   If layout is	Do the following
   If the layout of the composition is vertical	Add either an Up or Down magnet, or both, or the vertical center magnet.
   If the layout of the composition is horizontal	Add either a left or a right magnet, or both, or the horizontal center magnet.

5. Go to the Main-ScrolllingView composition.

6. Click the Composition menu and select You.i: Preview Current Composition to preview the list behavior with magnets.

Special Cases: Adding Magnets to a Mixed List or List of Mixed Lists

A mixed list is a list comprised of list items that are of different sizes. For example, first list item’s size may be 150 x 150 pixels, but the second list item’s size may be 100 x 150 pixels.

A mixed list is good to use in cases where you want to highlight new or unique features, new videos, or other new content from the app. The featured or the highlighted content is necessary to consider prior to adding a magnet to a mixed list.

In the diagram above, the 2 x 3 item means width and height of the list item are in 2 : 3 ratio. Similarly, 1 x 1 list item means that width and height of the list item are in equal ratio.

Magnet Behavior in Mixed Lists

Magnets can play an important role in a list with mixed-size items. By using magnets, you can spotlight a list item that may have new features or new content. Positioning a magnet in a mixed list can be challenging due to the various item sizes you may be working with.

Note that adding a center magnet at anything other than a 0 offset value may not be feasible in mixed lists, as some of the list items may get clipped as they are scrolled.

To Add Magnets in the Mixed List

1. Open the Magnets-Examples.aep file
2. Select the List-Magnets-Default composition in the After Effects timeline panel in the After Effects file.
3. Select the Properties tab in the AE Properties panel.
4. Do one of the following steps:
   1. If the layout of the composition is vertical, add either an Up or Down magnet, or both, or the vertical center magnet.
   2. If the layout of the composition is horizontal, add either an Left or Right magnet, or both, or the horizontal center magnet.
5. Go to the Main composition.

6. Open the Composition menu and select You.i: Preview Current Composition to preview the list behavior with magnets.

   

To Add Magnet at Left-Center Offset in a Mixed List

Do the following:

1. Open the Magnets-Examples.aep file.

2. Select the List-Magnets-LeftWithOffset composition in the After Effects timeline panel in the After Effects file.

3. Select the Properties tab in the AE Properties panel.

4. Calculate the distance between the center of the list and the left edge of the list. Add the center magnet at this location. For example, if the center is 1000 pixels and left edge is at 0 pixels, position the magnet at 500 pixels.

   

5. Go to the Main Composition.

6. Open the Composition menu and select You.i: Preview Composition to launch the preview tool and preview the magnets behavior in the mixed list.

To Add Magnets at the Top-Center in a List of Mixed Lists

1. Open the Magnets-Examples.aep file.

2. Select the List-Magnets-ListofLists composition in the After Effects timeline panel of the After Effects file.

3. Select the Properties tab in the AE Properties panel.

4. Add the top-center magnet to the list of mixed lists.

   The layout of the composition is vertical, so calculate the height from the center of the list to the top. Position the vertical center magnet between the center and the top. For example, if the composition height is 1080 pixels, position the magnet at 300 pixels up from the vertical center. 

   

5. Go to the Main composition.

6. Open the Composition menu and select You.i: Preview Current Composition to preview the list behavior with magnets.