Framer Motion

What Is Framer Motion?

Framer Motion is a production-ready animation library for React that provides a declarative API for animations, gestures, layout transitions, and exit animations. Created by the team behind the Framer design tool, it has become the most popular animation library in the React ecosystem.

Declarative Animations

Animations are declared through props on the motion component. Setting animate={{ opacity: 1, y: 0 }} with initial={{ opacity: 0, y: 20 }} creates a fade-in-up animation without imperative JavaScript. The library handles timing, interpolation, and DOM updates.

Layout Animations

The layout prop enables automatic animation between layout states. When a component's position or size changes due to DOM reflow, Framer Motion animates the transition smoothly using FLIP (First, Last, Invert, Play) techniques. Shared layout animations move elements between different components.

Gestures

Built-in gesture recognition includes drag, hover, tap, pan, and viewport detection. Drag constraints, elastic boundaries, and momentum-based physics provide natural-feeling interactions without external libraries.

AnimatePresence

AnimatePresence enables exit animations for components that are removed from the React tree. Components define their exit animation, and AnimatePresence delays removal until the animation completes. This solves a common React animation challenge where unmounted components cannot animate.

Variants

Variants define named animation states that propagate through component hierarchies. Parent variants can orchestrate children through staggering, delay, and conditional activation, enabling complex choreographed animations with minimal code.

Why Use Framer Motion

React developers wanting polished animations without learning a complex animation API choose Framer Motion. The declarative approach integrates naturally with React's component model, and features like layout animations and AnimatePresence solve problems specific to React applications.