Framer Motion
A production-ready animation library for React
Framer Motion (now published as 'motion' for React) is a declarative animation library for React that lets developers animate component props, layout changes, gestures, and page transitions using simple component props and hooks, rather…
Definition
Framer Motion (now published as 'motion' for React) is a declarative animation library for React that lets developers animate component props, layout changes, gestures, and page transitions using simple component props and hooks, rather than imperative animation code.
Overview
Framer Motion was built by the Framer team to bring animation capability directly into React's declarative component model, rather than requiring developers to drop into imperative animation APIs. Its core primitive is the `motion` component — a drop-in replacement for standard HTML/SVG elements (`motion.div`, `motion.svg`) — which accepts `animate`, `initial`, `exit`, and `transition` props describing target states and how to move between them, letting animations be expressed as just another part of a component's render output. A standout feature is Framer Motion's `layout` prop, which automatically animates changes in an element's position or size between renders (a FLIP-style layout animation) without manual measurement code, making previously fiddly animations — reordering lists, expanding cards, shared element transitions between views — comparatively simple to implement. `AnimatePresence` extends this to exit animations, letting components animate out before being removed from the DOM, which React's own reconciliation does not support natively since unmounted components are normally removed instantly. Framer Motion also provides built-in gesture support (`whileHover`, `whileTap`, `whileDrag`) that ties directly into the same animation system, physics-based spring animations as an alternative to duration-based easing, and `useScroll`/`useTransform` hooks for scroll-linked animation effects comparable to GSAP's ScrollTrigger but expressed idiomatically as React hooks. Because it's designed specifically for React's component and hook model, Framer Motion is generally the first choice for animating React applications, while framework-agnostic libraries like GSAP are chosen when animation needs to span non-React contexts or require the deepest possible timeline control.
Key Features
- motion components as drop-in animatable replacements for HTML/SVG elements
- Declarative animate/initial/exit/transition props matching React's rendering model
- Automatic layout animations (FLIP-style) via the layout prop
- AnimatePresence for animating components on unmount/exit
- Built-in gesture support: whileHover, whileTap, whileDrag
- Physics-based spring animations alongside standard easing curves
- useScroll and useTransform hooks for scroll-linked animation
- Deep integration with React's component tree and hook system