framer-motion

Use when working with Framer Motion for React animations, layout transitions, gestures, scroll-driven animations, or mount/unmount transitions with AnimatePresence. Also use when debugging spring physics, animation performance, or layout animation issues.

Model	Source
sonnet	pack: frontend

Full Reference

┏━ 🔧 framer-motion ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ Use when working with Framer Motion for React … ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Framer Motion (Motion for React)

Motion for React (formerly Framer Motion) v12.x — production animation library for React. Latest stable: 12.34.x (February 2026). Package rebranded from framer-motion to motion in November 2024.

Quick Reference

Item	Value
Package	motion (new) or framer-motion (legacy, still works)
Current version	12.34.x
React import	import { motion } from "motion/react"
RSC import	import * as motion from "motion/react-client"
Legacy import	import { motion } from "framer-motion" (still supported)
Docs	https://motion.dev/docs/react
Install	npm install motion

Reference Index

File	When to use
installation-setup.md	First-time setup, Next.js App Router config, MotionConfig, migration from framer-motion
animating-elements.md	motion components, core props, animatable properties, basic patterns
transitions.md	Spring, tween, inertia configs, per-property transitions, repeat
exit-animations.md	AnimatePresence, exit prop, modes (sync/wait/popLayout), list removals, page transitions
layout-animations.md	layout prop, layoutId shared transitions, LayoutGroup, card-to-modal, grid reflow
gestures.md	whileHover, whileTap, whileInView, drag, dragControls, gesture callbacks
scroll.md	useScroll, useTransform, scroll-reveal patterns, useMotionValueEvent, parallax
variants.md	Variants, staggerChildren, propagation, dynamic variants, useAnimation, useAnimate
motion-values.md	useMotionValue, useSpring, useTransform, useMotionTemplate, useVelocity
performance.md	GPU-accelerated props, reducedMotion, will-change, skipAnimations, bundle size
migration-changelog.md	v10→v12 changes, deprecated patterns, package rename, upgrade guide

Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.