Motion & texture

Staggered Animation

Q: How do I implement a Staggered Animation?

Stagger the card grid: each card fades in and rises 20px over 300ms ease-out, delayed by calc(var(--i) * 50ms) with --i capped so item 12+ shares the same last delay. Disable the entrance on subsequent filter re-renders.

A group of elements enters with tiny delays between them—turning a flash into a sequence.

Also known as staggered entrance · cascading reveal · sequenced fade-in

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Staggered Animation".

Stagger the card grid: each card fades in and rises 20px over 300ms ease-out, delayed by calc(var(--i) * 50ms) with --i capped so item 12+ shares the same last delay. Disable the entrance on subsequent filter re-renders.

Anatomy:
- stagger interval: 40–80ms—just enough for the eye to read order.
- item animation: Usually fade + 16–24px rise with ease-out.
- cap: After ~8–10 items stop stacking delay or the last card arrives late.

Preferred API / pattern: `Framer Motion staggerChildren / CSS --i delays`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Uncapped delay on 50 cards
○Avoid: Restaggering after every search/filter
○Avoid: Stagger on above-the-fold critical content
○Avoid: Huge intervals (200ms+)

In plain wordsHow people search for it

“list items popping in one after another instead of all at once”“cards rising like dominoes”“menu options that follow each other when the panel opens”

AnatomyOpen for part names

stagger interval: 40–80ms—just enough for the eye to read order.
item animation: Usually fade + 16–24px rise with ease-out.
cap: After ~8–10 items stop stacking delay or the last card arrives late.

How to write itOpen for stack patterns

Web (HTML/CSS)animation-delay: calc(var(--i) * 60ms)

React + Tailwind + shadcn/uiFramer Motion staggerChildren / CSS --i delays

SwiftUIdelay on each item / staggered phase animators

Ant Designcustom CSS on List/Card grids

Notes

Simultaneous appearance is a flash; 50ms offsets feel directed for almost free. One CSS custom property --i per item drives delay. Cap the chain—20 × 100ms is a two-second wait. Play once on first entry; replaying after every filter is interruption, not polish.

Common mistakesHumans and models trip here

Uncapped delay on 50 cards: the last one shows up after the user already scrolled past.
Restaggering after every search/filter: feels like the UI is restarting, not updating.
Stagger on above-the-fold critical content: hurts LCP for no gain.
Huge intervals (200ms+): reads as lag, not choreography.

More failure symptoms on AI broke it.

Related patterns

Easing / Timing FunctionHow speed is distributed over an animation’s duration—what makes motion feel mechanical or natural.Spring AnimationMotion driven by stiffness and damping instead of a fixed duration curve—naturally overshoots, then settles.Scroll RevealPlay an entrance when an element enters the viewport—the pacing tool for long pages.Skeleton ScreenPlaceholder shapes that mirror upcoming content so loading feels structured, not empty.

Spotted a wrong name or missing pattern?

Message on X