# Framer Motion

Framer Motion / Motion sub-skill - AnimatePresence, layout animations, gestures, motion...

- Repository: https://github.com/AThevon/genjutsu (721 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add AThevon/genjutsu --skill framer-motion -g -a claude-code -y`
Codex: `npx skills add AThevon/genjutsu --skill framer-motion -g -a codex -y`
Cursor: `npx skills add AThevon/genjutsu --skill framer-motion -g -a cursor -y`
Gemini CLI: `npx skills add AThevon/genjutsu --skill framer-motion -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add AThevon/genjutsu`

## Description

Framer Motion / Motion sub-skill - AnimatePresence, layout animations, gestures, motion values.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

> **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 (14.9.0 as of 2026-10-31): `motion` declares
> `"framer-motion": "14.9.0"` (an exact pin since v14) 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 v14. 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 |
| 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 |

The rest: https://github.com/AThevon/genjutsu/blob/HEAD/skills/_jutsu/framer-motion/SKILL.md