framer-motion

Framer Motion is the most popular animation library for React, providing a simple declarative API for creating complex animations, gestures, and layout transitions. The library's core concept is the motion component — any HTML or SVG element prefixed with motion (motion.div, motion.button) gains animation capabilities through props. The animate prop defines the target state, initial sets the starting state, and Framer Motion automatically interpolates between them with spring physics by default. The library handles enter/exit animations through AnimatePresence, shared layout animations with layoutId for morphing elements between different components, scroll-triggered animations, drag gestures with constraints and inertia, hover and tap animations, and orchestrated stagger animations. Framer Motion provides variants for defining named animation states and orchestrating complex sequences across component hierarchies. The useMotionValue and useTransform hooks enable creating derived animated values and parallax effects. The library supports SVG path animation, keyframe sequences, and spring/tween/inertia transition types. Framer Motion's API is more intuitive than CSS animations for complex scenarios and significantly simpler than GSAP or React Spring for most React use cases.