Motion Animation Patterns

Quick Guide: motion.* components take initial, animate, exit and transition props; variants lift those states into named sets a parent can orchestrate; AnimatePresence is what keeps a removed component mounted long enough to animate out; layout and layoutId run FLIP animations over layout changes; useScroll and useInView drive motion from scroll position. Animate x, y, scale, rotate and opacity, and set MotionConfig reducedMotion="user" at the root.

Import: import { motion } from "motion/react" — the package was renamed from framer-motion at v11.

Detailed Resources: