# Motion V13

> React animations with Motion v13 (gestures, scroll, layout, SVG). Use when drag-and-drop, scroll animations, modals, carousels, parallax, or AnimatePresence issues.

- Skill: `blockmatic/motion-v13` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add blockmatic/motion-v13`
- Raw SKILL.md: https://api.skillmd.com/api/skills/blockmatic/motion-v13/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: blockmatic (https://skillmd.com/u/blockmatic)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/blockmatic/motion-v13

---


# Motion

Package: `motion` ^13 (formerly `framer-motion`). Import from `motion/react`, not `framer-motion`.

Folder major tracks the npm `motion` package, not a skill-file revision. This repo may not list `motion` in `package.json` (CSS/`tw-animate-css` first); keep `motion-v13` so `pnpm add motion` stays aligned. Do not invent `-v1` for libraries that have an npm major.

## When

Use for drag, scroll-linked, layout, gestures, shared-element transitions. Prefer CSS/`tw-animate-css` first (see @.cursor/rules/frontend/design.mdc).

## Install

`pnpm add motion` — import `{ motion, AnimatePresence } from "motion/react"`.

Motion 13 dropped `@emotion/is-prop-valid` as an optional dependency. If styled `motion` components leak CSS-in-JS props to the DOM, inject `isValidProp` via `MotionConfig` or compose `motion.create(StyledDiv)`. See https://motion.dev/docs/react-upgrade-guide

## Depth

- Corrections vs old Framer Motion APIs: [rules/motion.md](rules/motion.md)
- Patterns: [references/common-patterns.md](references/common-patterns.md)
- Next.js `'use client'`: [references/nextjs-integration.md](references/nextjs-integration.md)
- Perf: [references/performance-optimization.md](references/performance-optimization.md)