motion-reactlisted

<!-- last-verified: 2026-07 --> # Motion for React (Framer Motion) Defer duration/easing/stagger choices to `motion-design-principles` — this skill is the React implementation layer, not the taste layer. Framer Motion (`motion`) is the default for React gestures/drag; reach for React Spring (`spring-physics-and-list-animation`) only when the motion must stay physically interruptible mid-gesture. ## 1. 2025 rebrand — get the import right Framer Motion rebranded to **Motion** and split from Framer the design tool. The package and import path both changed: ```tsx // current import { motion, AnimatePresence } from "motion/react"; // old (framer-motion package) — still works but is the legacy import import { motion, AnimatePresence } from "framer-motion"; ``` New code should import from `motion/react`. If a codebase still has `framer-motion` in `package.json`, that's fine (it's the same engine under new ownership) but new imports should target `motion/react` going forward — flag the mismatch rather than silently perpetuating the old package name. ## 2. Core API ```tsx <motion.div animate={{ x: 100, opacity: 1 }} transition={{ type: "spring", stiffness: 300, damping: 30 }} /> ``` - `initial` / `animate` / `exit` describe *states*, not keyframe timelines — Motion interpolates between them. - `transition` picks bezier (`type: "tween"`, with `duration`/`ease`) or spring (`type: "spring"`, with `stiffness`/`damping` or `bounce`/`duration`) per the spring-vs-bezier