animation glossary
Stagger Animation
A stagger animation reveals a group of items one by one with a small delay between each, so the whole set cascades into place.
What is Stagger Animation?
Staggering is the difference between a list that pops in all at once and one that feels choreographed: each item appears a few dozen milliseconds after the last, creating a cascading wave. It is the default for menus, card grids, and data rows. The shots below show staggered lists, value columns, and text entrances.
Stagger Animation in Remotion
Every shot below is a real, renderable Remotion composition. Open the detail page for the recipe notes, then copy the agent brief to implement the shot from tuned TSX.
Implement stagger animation
Copy the agent brief for the first shot to have an AI agent build it from the reference TSX.
Frequently asked questions
What is a stagger animation?+
A stagger animation reveals a group of items sequentially, each starting a short delay after the previous one, so the set cascades into place like a wave.
How much delay should be between items?+
30–90ms per item reads as a smooth cascade. Longer delays make each item feel deliberate; shorter ones read as a single mass. The total stagger should stay under about a second.
When should you stagger elements?+
Lists, menus, card grids, and any repeated element that should feel choreographed. Staggering also draws the eye through the content in the order the items appear.