List items rise + fade in, one after another. Part of
motion-anything; obeys MOTION-SPEC.md.
When to use it
- Short above-the-fold lists, menus, nav items, or a dropdown opening.
When NOT to use it (restraint)
- Long / off-screen lists — use
scroll-reveal. Keep the whole sequence under ~600ms.
How to apply
- Copy
stagger-list.cssandstagger-list.jsand link them. - Wrap items:
<ul data-stagger>…</ul>(optionaldata-stagger-step="70").
Accessibility & performance
prefers-reduced-motion: shown immediately. Transform/opacity only.