Stagger
Also called staggered animation or cascade animation
Animating a group of items one after another with a small delay between each, so they arrive as a cascade.
import { motion, type Variants } from 'motion/react';
const tasks = [
'Design review',
'Ship onboarding',
'Write release notes',
'Plan Q3 roadmap',
'Team offsite'
];
const list: Variants = {
hidden: {},
// Each row starts 60ms after the one before it.
show: { transition: { staggerChildren: 0.06 } }
};
const row: Variants = {
hidden: { opacity: 0, y: 12 },
show: {
opacity: 1,
y: 0,
transition: { duration: 0.4, ease: [0.23, 1, 0.32, 1] }
}
};
export function TaskList() {
return (
<motion.ul
variants={list}
initial='hidden'
animate='show'
className='flex w-72 flex-col gap-2'
>
{tasks.map((task) => (
<motion.li
key={task}
variants={row}
className='rounded-xl border bg-background px-4 py-3 text-sm font-medium shadow-sm'
>
{task}
</motion.li>
))}
</motion.ul>
);
}When the task list loads, fade each row in and slide it up 12px over 400ms with an ease-out curve. Stagger the rows by 60ms, and cap the stagger at the first 8 rows so long lists still appear quickly.
Paste into Layerwise or any AI coding tool.
What is Stagger?
A stagger gives every item in a list, grid, or menu the same animation, offset by a short delay. The eye follows the wave from the first item to the last, so a page full of content feels orderly instead of popping in all at once.
Keep the delay small, usually 30 to 80ms per item, and cap the total. If a list has 40 rows, stagger the first eight or so and show the rest immediately, or people end up waiting for decoration.
Staggers work best on first load and when a new set of items appears, such as search results or a menu opening. Skip them for content people open many times a day.
Often confused with
- Orchestration
- Orchestration coordinates different animations into one sequence. A stagger repeats one animation across many items.
Related terms
All termsDelay
The wait between the moment an animation is triggered and the moment it starts moving, used to sequence motion or ignore brief triggers.
Orchestration
Coordinating several different animations into one planned sequence, so the parts of a screen enter in a clear order.
Fade in
An entrance animation where an element goes from fully transparent to fully visible, so it appears gently instead of popping in.
Scroll reveal
An animation that fades or slides content into place as it scrolls into view, so each section appears just as the reader reaches it.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.