animation-designer

Wrap your layout children in a motion.div keyed by usePathname, then set initial, animate, and exit opacity and x values. The transition triggers automatically on route changes with a duration around 0.3 seconds.

Define container and item variants in Framer Motion, set staggerChildren in the container transition, and apply variants to motion.li elements. Each child animates in sequence with the specified delay between items.

Framer Motion suits interactive, state-driven animations like gestures, drag, and exit transitions. CSS keyframes work better for simple looping effects like spinners and fades where no JavaScript state coordination is needed.

Yes, the useReducedMotion hook detects the user's prefers-reduced-motion setting. You can conditionally disable transforms and set transition duration to zero so animations respect accessibility preferences.

Animating width or height triggers layout recalculation on every frame. Animate transform and opacity instead, since these are GPU-accelerated properties that skip layout and paint stages.

Use 200-400ms for most UI animations. Durations under 100ms feel abrupt, while anything over 500ms feels sluggish. Pair with easeOut easing or spring physics for natural motion.