List Design

Lists display dynamic and scrollable content. Because the content is dynamic, lists work with layouts to determine how the content appears and behaves. For more information, check out our Tutorials.

Creating a List

To create a list:

1. Create a list item within a composition.
2. Precompose the list item inside a list composition.
3. Change the list composition type to List. See Composition Type and Subtype for details.
4. Add the desired layout to the list.
5. If the list item needs to replaced by dynamic content, ensure its Placeholder layer property is selected. (See Layer Properties for details.) Otherwise, the list item appears in the list as it is in After Effects.

List Timelines

There are two types of timeline you can implement with lists: move and cascade.

Move Timelines

To increase the visual appeal of a list, use the Move timeline and associated transforms for the items within the list. The Move timeline is not driven by time changes but is instead driven by the position of the item as it appears. As the user scrolls through the list, old items scroll off the list while new items scroll onto the list. The Move timeline and its transforms are applied as items go off the list and onto the list.

For one dimensional lists a timeline named ‘Move’ is adequate; for two dimensional lists a different timeline may be specified for each of the horizontal and vertical directions. These directional move timelines are named MoveHorizontal and MoveVertical respectively. For two dimensional lists the Move timeline may still be specified and uses the distance from the top-left of the list as its position within the timeline.

Cascade Timelines

Screen transitions play In and Out animations. Similarly, lists play CascadeIn and CascadeOut animations when the list appears and disappears from the screen. The term “cascade” refers to the fact that the animation is applied with staggered offsets on each item in the list. This capability allows for rich and interesting animations to occur when the list appears or disappears from the screen.

The Cascade timelines require that the list has an In or Out marker.

List Navigation and Magnets

A list can be thought of as a scrolling window to view content. On platforms with touch and cursor input, users can scroll through the list’s content by pressing on the content of the list and dragging in the opposite direction of a scroll.

On platforms which use focus to navigate, the list scrolls whenever a new item is focused until the item is completely visible or, if the item is larger than the list, until its top or left edge is aligned with the top or left edge of the list.

Magnets can be added to the list so that items snap to a position as the view is scrolled. A list scrolled left has content entering on the left side. If the view is configured with two horizontal magnets the list moves to align the left magnet and the closest left edge of a list item.

Similarly when content enters from the right, top, or bottom while scrolling, the view aligns the right, up, and down magnets to the right, top and bottom edge of the closest list item.

When the list has a single horizontal magnet or vertical magnet, the view snaps the center of each item to the magnet’s position.

You can find much more information about magnets in the Working With Magnets document.

List Carousel

The carousel feature causes the content of the list to wrap around so that a full scroll through the list contents returns the user to the point at which they started, rather than at the end of the content.

List Background

Use the Background layer layout property to apply the list background (See Common Layer Layout Properties). The background encapsulates all of the content and scrolls with the list, but does not appear in the overflow region of the list.

If the background is an image instead of a solid color, use the Properties panel to control the scaling properties of the image:

Sizing: If the content is smaller than the list size, select if and how the background image resizes. The image can stretch, fill or fit the list size.

• Repeat mode: If sizing is not Stretch, select if and how the background image repeats. The image can tile, mirror, or clamp. Clamping causes the last pixel on the edge of the image to be repeated.
• Mipmapping: Select if mipmapping is applied for the image. If selected, the image uses more memory smooth out fine details when it is scaled down.

Apply the background to a container containing the list instead of the list itself when the background:

• Should not scroll with the list
• Should not encapsulate the entire content of the list
• Should be within the overpull region of the list.