framer-motionlisted

# Framer Motion — Sub-skill > Package: `motion` (v11+, formerly `framer-motion`). Import: `import { motion, AnimatePresence } from "motion/react"` ## When to use Framer Motion vs alternatives | Criteria | Framer Motion | GSAP | Native CSS | |---------|--------------|------|-----------| | Layout animations | Excellent (layoutId) | Manual | Impossible | | Exit animations | AnimatePresence | Timeline reverse | Limited (display) | | Gestures (drag, hover) | Native, declarative | Draggable plugin | Basic | | Scroll-driven | useScroll + useTransform | ScrollTrigger (more powerful) | scroll-timeline | | Complex orchestration | Variants + propagation | Timeline (more flexible) | @keyframes | | Bundle size | ~50kb tree-shaken | ~30kb core | 0kb | | React integration | Native, component-first | Refs + useGSAP | className toggle | **Rule**: Framer Motion for React UI interactions (modals, toasts, reorder, shared layout). GSAP for complex timelines, cinematic scroll-driven, SVG morphing. ## AnimatePresence — Exit animations ```tsx <AnimatePresence mode="wait"> {isVisible && ( <motion.div key="unique-key" // REQUIRED — identifies the component initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} /> )} </AnimatePresence> ``` - `mode="wait"` — waits for exit to finish before enter (page transitions) - `mode="sync"` — exit and enter simultaneously - `mode="popLayout"` — removes from flow immediately (good for lists) - `onEx