motion-framer

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

Define container variants with staggerChildren and delayChildren in the transition, then apply item variants to each child. Children automatically inherit the parent's animate state, so each item animates in sequence.

Motion (v11+) is the newer, 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 supports TypeScript with exported types like Variants, Transition, and MotionProps. It works with Next.js, Vite, Remix, and all modern React frameworks, and also supports Vue.

Jank usually comes from animating layout properties like width, height, top, or left instead of hardware-accelerated transforms. Animate x, y, scale, and rotate instead, and limit layout prop usage since layout animations 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 defines an exit prop with the target animation state.