Chapter 85: stagger

Core Idea

Learn to create staggered animations across multiple elements with Motion's stagger() function. Discover options to customize the starting delay, the stagger origin ('first', 'center', 'last', or an index), and apply easing to the stagger distribution.

Key Concepts

• Animation sequencing: It's also possible to stagger segments within animation sequences.
• Negative staggers: Motion supports setting delay as a negative value in order to start an animation mid-way.
• Grid stagger: The stagger function doesn't yet support staggered grids
• Stagger direction: It's possible to set a stagger direction by choosing a direction to stagger from.
• Stagger React animations: stagger works with Motion for React via a variant's delayChildren option.
• startDelay: Default: 0
• from: Default: "first"
• ease: Default: "linear"
• 430+ production-ready examples.: JavaScript

Code Examples

import { animate, stagger } from "motion"

animate(
  "li",
  { opacity: 1 },
  { delay: stagger(0.1) }
)

• What it demonstrates: Core usage pattern for stagger.

Key Takeaways

1. stagger supports Animation sequencing.
2. stagger supports Negative staggers.
3. stagger supports Grid stagger.

Connects To

• Text animation: related Motion doc page.
• SVG loading spinner example & tutorial for JavaScript: related Motion doc page.
• Physical stagger example & tutorial for JavaScript: related Motion doc page.
• Easing functions: related Motion doc page.
• animate(): related Motion doc page.