← ClaudeAtlas

framer-motionlisted

Framer Motion / Motion sub-skill - AnimatePresence, layout animations, gestures, motion values.
AThevon/genjutsu · ★ 334 · Web & Frontend · score 79
Install: claude install-skill AThevon/genjutsu
> **Version-sensitive.** Every API name, SDK gate and browser-support claim below was > verified on **2026-09-08** against primary sources. What against, and when, is in > `_jutsu/VERSIONS.md`. If that date is old, re-verify before acting on a version number. # Framer Motion — Sub-skill > **Two package names, one library.** Framer Motion was renamed to Motion. `motion` and > `framer-motion` both publish the same version (13.2.0 as of 2026-09-08): `motion` declares > `"framer-motion": "^13.2.0"` as a dependency and `motion/react` re-exports it. Neither is > broken, and `framer-motion` is still the one most installed projects have. > > **Read `package.json` and follow what is there.** Do not migrate a project from one to the > other unless the user asks - that is Iron Rule 8 in `cast` / 10 in `paint`. > > | In `package.json` | Import from | Install line | > |---|---|---| > | `motion` | `"motion/react"` | `npm install motion` | > | `framer-motion` | `"framer-motion"` | `npm install framer-motion` | > | both | whichever the file you are editing already imports; say the project is mid-migration | - | > > Every API in this skill is identical across the two names at v13. Where a symbol is newer > than v11, it is flagged inline. Peers: `react` / `react-dom` `^18 || ^19`. ## When to use Framer Motion vs alternatives | Criteria | Framer Motion | GSAP | Native CSS | |---------|--------------|------|-----------| | Layout animations | Excellent (layoutId) | Manual | Impossible | | Exi