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.
To create a list:
There are two types of timeline you can implement with lists: move and cascade.
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.
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.
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.
Although displayed on the screen with vertical lines, horizontal magnets are so named because they cause the list items to snap into place horizontally.
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.
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.
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.
Apply the background to a container containing the list instead of the list itself when the background: