framer-motion-animator

Wrap the element in a motion component and set initial and animate props, such as initial={{ opacity: 0, y: 20 }} and animate={{ opacity: 1, y: 0 }}. Add a transition prop to control duration, easing, or spring physics.

Wrap conditionally rendered components in AnimatePresence and define an exit prop on the motion element. Framer Motion delays unmounting until the exit animation completes, which is essential for modals and route transitions.

Yes, Framer Motion works in Next.js App Router inside client components marked with 'use client'. A common pattern is placing a motion wrapper in app/template.tsx so every route navigation replays the page transition animation.

Define container variants with staggerChildren and delayChildren in the transition, then give each child itemVariants. Set initial="hidden" and animate="visible" on the parent so children animate in sequence automatically.

Jank occurs when animating non-GPU-accelerated properties like width, height, top, or left. Animate only opacity and transform properties, and use the layout prop or layoutId for smooth size and position changes instead.

Use the useReducedMotion hook to detect the user's accessibility setting, then conditionally disable movement or set transition duration to zero. This keeps animations accessible for users sensitive to motion.