Stagger
An animation pattern where a group of elements animates one after another with a small delay between each.
Instead of every item fading in at once, items appear in sequence — a 50ms or 100ms delay between each. Stagger draws the eye through the group and makes the entrance feel orchestrated rather than chaotic. Common in list reveals, grid loads, and nav bar animations. CSS now supports it natively via `animation-delay` calculated with `sibling-index()`; before that, the delay had to be set per element or via JS.
Also called
staggered animationcascade animation
When to use
- Lists or grids appearing on initial load
- Reveal animations where multiple elements arrive at once
- Anywhere a simultaneous animation would feel like a flash rather than a sequence
When not to use
- Long lists where staggering all items would feel slow
- Critical content the user is waiting to interact with (don't make them wait through the animation)
Related
Source
Animation vernacular; widely used in motion design and now formalized in CSS via `sibling-index()`.