Framer Motion: orchestration over animation

Animation vs orchestration

A single animated element is easy. The thing that reads as quality is how multiple elements relate in time — what leads, what follows, what waits. That’s orchestration, and Framer Motion is built for it.

Stagger with intent

Variants let a parent conduct its children. A small staggerChildren turns a flat list reveal into a sequence the eye can actually follow.

const list = {
  show: { transition: { staggerChildren: 0.06 } }
};
const item = {
  hidden: { opacity: 0, y: 12 },
  show:   { opacity: 1, y: 0 }
};

Shared layout for continuity

layoutId animates an element between two places in the tree — a thumbnail that expands into a detail view, a tab indicator that slides. It preserves the user’s sense of place across a transition.

Knowing when to stop

The best motion is the kind users feel but never notice. When in doubt, do less.

Reduce motion for users who ask for it, keep durations short, and let the choreography serve the content — never the reverse.