framer-motion-animator

Wrap your element in a motion component and define initial, animate, and transition props. For example, set initial opacity to 0 and animate to 1 with a duration or spring transition for a fade-in effect.

Use AnimatePresence from Framer Motion to wrap conditionally rendered components. Define an exit prop on the motion element, and AnimatePresence will play that exit animation before removing the component from the DOM.

Yes, Framer Motion works with Next.js App Router by marking animation files with 'use client'. A common pattern is placing a motion wrapper in app/template.tsx to animate page transitions on route changes.

Define container variants with staggerChildren and delayChildren in the transition, then apply item variants to each child motion element. The parent propagates animation state to children automatically.

Jank occurs when animating layout properties like width, height, top, or left, which trigger reflow. Animate only GPU-accelerated properties such as opacity and transform, and use the layout prop for smooth resizing.

Use the useReducedMotion hook to detect the user's accessibility preference. Conditionally disable or simplify animations, such as removing y-offsets and setting duration to zero when reduced motion is requested.