motion-framer

Wrap the conditional component in AnimatePresence and add an exit prop to the motion component defining the exit animation. The component must be a direct child of AnimatePresence and have a unique key prop for tracking.

Define container variants with staggerChildren and delayChildren in the transition, then define item variants for each child. Children automatically inherit the parent's variant labels, so you only set initial and animate on the container.

Motion (v11+) is the modern, smaller library from the Framer Motion creators, while Framer Motion is the full-featured predecessor still widely used. Both share the same API with motion components, variants, and gesture props.

Yes, Framer Motion works with Next.js, Vite, Remix, and all modern React frameworks, and fully supports TypeScript. You can import types like Variants, Transition, and MotionProps from framer-motion for type-safe animation definitions.

Janky animations usually result from animating layout properties like width, height, top, or left instead of hardware-accelerated transforms. Animate x, y, scale, and rotate instead, and use layout animations sparingly since they are computationally expensive.

Exit animations fail when the component is not wrapped in AnimatePresence or lacks a unique key prop. Ensure the motion component is a direct child of AnimatePresence and has an exit prop defining the animation.