Stagger
Eighty milliseconds between siblings turns a blob into choreography.
When a group of elements appears at once, the eye gets one event: stuff happened. Delay each sibling slightly and the same content becomes a sequence the eye can follow — first this, then this. Film editors stagger cuts for the same reason.
Around 80–100ms the list feels orchestrated. At 0 it's a simultaneous blob; past 200ms it feels like waiting.
The recipe
.item {
animation: enter 400ms ease-out both;
animation-delay: calc(var(--i) * 80ms);
}
- 80–100ms per step is the pocket. Below 50ms it collapses back into a blob; above 200ms the tail feels like lag.
bothfill mode matters — items must be invisible before their turn.- Cap the total. Stagger the first five or six; land everything after together. Nobody wants to watch row 30 arrive.
Restraint
Stagger is an entrance effect — reserve it for moments that deserve one: first load, opening a panel, a completed search. Re-running it on every interaction (Rauno Freiberg would say you're spending your novelty budget) turns choreography into a wait.