Motion

Motion is a production-grade animation library for React and JavaScript — formerly known as Framer Motion, now independent and expanded to support vanilla JS and other frameworks.

Documentation

• Docs: https://motion.dev/docs/

Key Capabilities

• Declarative animations: motion components animate via initial, animate, and exit props — no manual DOM manipulation
• Variants: Named animation states shared across component trees, with automatic stagger and orchestration
• Exit animations: AnimatePresence keeps unmounting components in the DOM until their exit animation completes
• Layout animations: layout prop uses FLIP technique to animate any CSS layout change automatically
• Gestures: Built-in whileHover, whileTap, whileDrag, and whileFocus props with full event callbacks
• Motion values: useMotionValue and useTransform create composable, signal-like values that update outside React's render cycle
• Imperative API: animate() function and useAnimate hook for programmatic control, usable outside React
• Spring physics: Default transition is spring-based; configure with type: "spring", stiffness, damping, mass
• Scroll animations: useScroll and useTransform for scroll-linked animations without scroll event listeners