Delay and Stagger
Delay controls when an animation starts; stagger sequences multiple elements so they animate in turn — creating a sense of order, hierarchy, and spatial flow.
A list of ten items that all animate simultaneously is visually chaotic. The same items staggered — each starting 30ms after the previous — read as a coherent sequence. Stagger is how choreography begins.
Delay
Delay defers the start of an animation. It is used to sequence elements that should animate in relation to each other — a heading that appears, followed by the body text, followed by a call-to-action. Delay also provides breathing room after a trigger: a tooltip that waits 300ms before appearing filters accidental hovers from deliberate ones.
The risk with delay is accumulation. If every element in a sequence has a 200ms delay, the final element may not animate until the user has already finished reading the first — the sequence has become a wait. Keep individual stagger offsets small (20–50ms for list items, 50–100ms for distinct sections) and keep total sequence duration under 500ms.
Stagger
Stagger applies delay progressively across a group of related elements. Each item in a list starts its animation slightly after the previous one, creating a wave effect. The direction of the stagger should match the reading direction — top to bottom for a vertical list, left to right for a horizontal one. A stagger that runs counter to reading direction feels wrong because it moves the user’s eye away from where they are reading.
Stagger as hierarchy
Stagger communicates relationship and hierarchy. Items that share the same stagger group are understood as peers. Items that animate before the group is a heading or parent. This is motion as structure — the sequence of animation mirrors the structure of the content.
When not to stagger
Do not stagger elements that the user needs to see immediately. A modal’s contents should animate in together, not in sequence — the user opened the modal for a specific reason and does not want to wait for the interface to reveal itself piece by piece. Stagger is for orientation on first arrival, not for every interaction. Apply it to page load, major view transitions, and initial list population. Remove it from repeated, triggered interactions where the user expects immediate response.
The takeaway
Use stagger for groups of related elements appearing together for the first time. Keep offset values small (20–50ms per item) and total sequence duration under 500ms. Match stagger direction to reading order. Do not stagger elements that users are actively waiting to interact with.