Motion

Animation library (Framer Motion) for React — gestures, layout, and scroll animations.

Overview

Motion (formerly Framer Motion) is a fast, production-grade animation library for building smooth UI animations across React, JavaScript, and Vue. It combines a hybrid engine that leverages native browser APIs (Web Animations API, ScrollTimeline) with JavaScript fallbacks, delivering 120fps performance with a tiny footprint—APIs up to 90% smaller than GSAP alternatives.

The library is trusted by major companies like Framer and Figma to power animations for millions of users, with over 30 million monthly npm downloads. Motion supports everything from simple transforms and scroll-linked effects to complex gesture-driven interactions, layout animations, and SVG animations, all through a declarative, React-friendly API.

Motion is completely free and open source (MIT licensed), with an optional Motion+ subscription offering 410+ premium examples, advanced APIs, AI Kit integration, and lifetime updates.

Key features

Spring physics animations
Hardware-accelerated transforms
Scroll-linked and scroll-triggered animations
Native gesture support (hover, tap, drag)
Layout animation with FLIP detection
SVG path drawing animations
Exit animations with AnimatePresence
Timeline sequences and staggering
Motion values for real-time state
Tree-shakable, tiny footprint

Pros

Declarative API natural to React
120fps performance with hybrid engine
Significantly smaller than GSAP
Trusted by Framer and Figma
Comprehensive documentation with 410+ examples
Free and open source (MIT)
Cross-framework support (React, JavaScript, Vue)
AI-friendly documentation and skills

Cons

Learning curve for advanced features like timeline sequences
Requires understanding of animation concepts for complex use cases
Motion+ subscription needed for premium examples and advanced APIs
May be overkill for simple CSS-only animations

Use this if

You need production-grade animations in React, JavaScript, or Vue; want a smaller bundle than GSAP; need gesture-driven or scroll-linked animations; or are building with AI agents that benefit from Motion's specialized documentation.

Skip this if

You only need simple CSS transitions for basic hover effects; your project doesn't use React, JavaScript, or Vue; or you prefer a different animation paradigm.

Best for

React developers building interactive UIsJavaScript/Vue projects needing smooth animationsBuilding gesture-driven interfacesScroll-linked and scroll-triggered animationsLayout transitions and shared element animationsSVG and WebGL animationsTeams prioritizing performance and bundle size

Alternatives

GSAPFramerAnimate.cssAOS (Animate On Scroll)Three.js (for 3D)Web Animations API (native)

Compare Motion alternatives

More Library

Compare all

React Query

Data-fetching and state management library designed to handle server state in web applications.

dotenv

Zero-dependency module loading environment variables from .env files into Node.js apps.

Solidjs

JavaScript library designed for building user interfaces with a focus on declarative syntax and efficiency.

UnoCSS

Instant on-demand atomic CSS engine — flexible, fast alternative to Tailwind.