Motion Framer

---
name: motion-framer
description: Motion (formerly Framer Motion) — declarative animation library for React with layout animations, gestures, and spring physics.
---

### motion components
`<motion.div>`, `<motion.span>`, etc. Props: `initial`, `animate`, `exit`, `transition`. Variants for named states. Spring defaults for natural motion.

### layout animations
`layout` prop auto-animates position/size changes. `layoutId` shared between elements for smooth morphing (magic motion). `LayoutGroup` for coordinating sibling animations.

### AnimatePresence
Wrap conditional mounts for enter/exit animations. `mode="wait"` for sequential. `mode="popLayout"` for layout shift animations. `onExitComplete` callback.

### gestures
`whileHover`, `whileTap`, `whileDrag`, `whileFocus`, `whileInView`. `drag="x"` for axis-locked drag. `dragConstraints` for boundaries. `onDragEnd` for callbacks.

### variants
Named animation objects. `variants={{ open: { opacity: 1 }, closed: { opacity: 0 } }}`. Pass to `initial`/`animate`/`exit`. Parent variants cascade to children with `transition={{ staggerChildren: 0.1 }}`.

### scroll-triggered
`useInView()` hook. `whileInView` prop. `useScroll()` for scroll progress. `useTransform()` to map scroll to motion values. `useSpring()` for smoothed scroll-driven motion.

### motion values
`useMotionValue(0)` — reactive value driving animations. `useSpring()` wraps it in spring. `useTransform(value, [input], [output])` for mapping. Read via `useMotionValueEvent()`.

### performance
Use `transform` instead of layout properties. Set `will-change` via `style={{ willChange: "transform" }}`. Use `layoutDependency` to limit recalculations. Prefer CSS animations for simple opacity/rotation.