motion-interaction-architect

Wrap children in an AnimatePresence component keyed by usePathname, using mode="wait" so the exiting page finishes before the new one enters. Define initial, animate, and exit variants with opacity and small y offsets, keeping durations between 250ms and 400ms.

Define container variants with staggerChildren (around 60ms) and delayChildren, then give each child item its own variants. Add the layout prop to each m.li so reordering or removing items animates smoothly instead of jump-cutting.

Yes, Framer Motion provides a useReducedMotion hook that detects the user's prefers-reduced-motion setting. Wrap it in a custom hook that returns zero-duration transitions when the preference is set, ensuring every animation has an instant no-motion fallback.

Use LazyMotion with the domAnimation feature set instead of importing the full framer-motion bundle. Wrap your app in the LazyMotion provider and use the m component (m.div) rather than motion.div throughout your components.

Exit animations only run when the component is wrapped in AnimatePresence and removed conditionally from the tree. Verify AnimatePresence is a direct parent of the conditional element and that each child has a stable key.

Use springs for physical, interactive motion like button presses, modals, and layout shifts since they feel natural and handle interruptions well. Reserve tween easing for linear progress indicators or cases requiring exact duration control.