motion
Stagger
also called staggering, delay cascade, staggered animation
Playing the same animation on a set of elements with a small delay added item by item, so the group arrives as a cascade instead of a block.
One animation, offset. A handful of rows fading in together read as a screen redrawing; the same rows offset by a tenth of a second each read as a list being dealt out, and the eye follows the order you intended.
The offset is small. Fifty to a hundred milliseconds between items is usually enough, and the total should stay under about half a second, which means the per-item delay has to shrink as the list grows. A ten-item list at 100ms takes a second to finish, and by the end the user is waiting for the interface rather than watching it.
Stagger is for entrances, for lists that change as a group, and for drawing attention to order. It is wrong for anything the user is waiting on, since every item after the first is being deliberately delayed. Pair it with an easing that settles rather than bounces, or the cascade turns into noise.
Which word?
| If you want | say |
|---|---|
| the same entrance played one item after another | stagger |
| one state of a page morphing into the next | view transition |
| motion should start after something else, not with it | delay |
Related
See also: Easing · Follow-through