What is Stagger Animation?

Stagger Animations reveal multiple elements sequentially with small delays between each. Creates cascading effect—first item animates, then second, then third. Draws eye down the list and feels more organic than all-at-once. Common for lists, grids, cards entering screen. Delay: 30-80ms between items.

When Should You Use This?

Use stagger for lists/grids entering screen: search results, card grids, menu items, timeline events, table rows. Each item fades/slides in with slight delay. Keep delay short (50ms typical) so total animation doesn't exceed 800ms. Use intersection observer to trigger when scrolling into view. Limit to first 10-15 items or feels too long.

Common Mistakes to Avoid

• •Too long delay—>100ms between items and users wait forever; keep 30-80ms
• •Staggering too many—50 items × 50ms = 2.5s wait; limit to 10-15 items
• •All at page load—don't stagger everything on initial load; only when scrolling to new content
• •No intersection observer—stagger should trigger when items enter viewport, not before
• •Same animation for all—first few items can use stagger, rest should appear immediately

Real-World Examples

• •Linear—search results stagger in when typing
• •Stripe docs—sidebar items cascade in on navigation
• •iOS App Library—app icons stagger onto screen
• •Google Material Design—list items cascade with elevation change