Components · Layout

List

Items that arrive one after another. Only the first six are staggered.

Try itChange the motion setting at the top to feel each personality.

Use it

<List>
  <ListItem>Target size</ListItem>
  <ListItem>Number of choices</ListItem>
</List>

When	Role	What moves
The list is first shown	enter, sequence	Each item fades in and rises by the enter distance, growing from the enter scale, starting one stagger after the item before it
An item is added later	enter	The new item enters. The others do not replay
The list is scrolled, sorted, or filtered	none	Nothing. These are frequent actions

Rules:

Only the first six items are staggered. Every item after that arrives with the sixth, so a long list never keeps the person waiting.
The sequence plays once, when the list appears. It does not replay on scroll.
Items do not animate out one by one. If the whole list leaves, it leaves as one piece.

Reduced motion: the enter distance is 0 and the stagger is 0, so every item fades in together where it stands.

CSS variables used: --ss-motion-enter-distance, --ss-motion-enter-spring, --ss-motion-enter-spring-duration, --ss-motion-sequence-stagger.