framer-motion-animator

Wrap the element in a motion component and set initial, animate, and transition props. For example, initial={{ opacity: 0, y: 20 }} with animate={{ opacity: 1, y: 0 }} creates a fade-in-up effect on mount.

Define container variants with staggerChildren and delayChildren in the transition, then give each child item its own variants. The parent motion.ul orchestrates timing so children animate in sequence automatically.

Yes, wrap conditional components in AnimatePresence and define an exit prop on the motion element. This is commonly used for modals, toasts, and route transitions that would otherwise disappear instantly.

Yes, add a template.tsx file marked 'use client' that wraps children in a motion.div with initial and animate props. This produces a transition on every navigation since templates remount per route.

Animating width, height, top, or left triggers layout recalculation and hurts performance. Animate only GPU-accelerated properties like opacity and transform (x, y, scale, rotate), and use the layout prop for size changes.

Use the useReducedMotion hook to detect the user's accessibility setting, then conditionally disable movement or shorten durations. For example, skip the y-offset and set duration to zero when reduced motion is preferred.