Motion (Framer Motion) — Modern Animation Library for React & JS

What Motion Does

• Declarative animations — initial, animate, exit props
• Layout animations — auto-animate when DOM layout changes
• Gestures — whileHover, whileTap, whileDrag, whileInView
• Variants — orchestrate animations across components
• Spring physics — natural-feeling motion
• SVG morphing — animate path data
• Scroll triggers — scroll-linked animations
• Vanilla JS — motion/react and motion (vanilla)

Architecture

Wraps DOM elements with motion.div, motion.svg, etc. Uses Web Animations API where possible (hardware accelerated), falls back to RAF for unsupported properties. Layout animations use FLIP technique.

Self-Hosting

Client library only.

Key Features

• Hardware-accelerated transforms
• Spring & inertia physics
• Layout animations (FLIP)
• Gesture handling (drag, hover, tap, focus)
• AnimatePresence for exit animations
• Variants for orchestration
• Scroll-linked animations
• Server-side rendering
• Now also supports vanilla JS

Comparison

FAQ

Q: What's the package name after the rename? A: It changed from framer-motion to motion. The React API is motion/react; vanilla is motion.

Q: How do layout animations work? A: FLIP (First, Last, Invert, Play): measure the before/after positions → apply an inverse transform → animate back to zero. Zero reflow overhead.

Q: Bundle too large? A: Use LazyMotion with on-demand features to shrink it to ~5KB.

Sources & Credits

• Docs: https://motion.dev
• GitHub: https://github.com/motiondivision/motion
• License: MIT