framer-motionlisted

# Framer Motion Declarative, React-state-driven animation. The default for "this component should animate when X happens". ## When to use Framer Motion vs GSAP | Need | Pick | |------|------| | Component mounts/unmounts | **Framer** (`AnimatePresence`) | | State change drives motion | **Framer** (`animate` prop) | | Drag, hover, tap gestures | **Framer** (`whileHover`, `drag`) | | Shared element across routes | **Framer** (`layoutId`) | | Long imperative timeline | **GSAP** ([gsap skill](../gsap/SKILL.md)) | | Scroll-pinned 3D scene | **GSAP** ScrollTrigger ([threejs-scroll-cinema](../threejs-scroll-cinema/SKILL.md)) | | Audio-synced choreography | **GSAP** | Mixing both in one project is fine. Framer for component-scoped, GSAP for global timelines. ## Install ```bash npm i motion ``` > Note: as of v11+ the package is `motion` (was `framer-motion`). Both still work. ```jsx import { motion, AnimatePresence } from 'motion/react'; ``` ## Core API | API | Purpose | |-----|---------| | `<motion.div>` | Animatable div (also `motion.span`, `motion.button`, `motion.path`, etc.) | | `initial` / `animate` / `exit` | Animation states | | `transition` | Duration, easing, type (tween/spring/inertia) | | `variants` | Reusable named states | | `whileHover` / `whileTap` / `whileFocus` / `whileInView` | Gesture-bound states | | `<AnimatePresence>` | Animate exit when removed from tree | | `layout` / `layoutId` | Auto-animate layout changes | | `useScroll` | Scroll progress hook | |