>Independent transforms
Animate x, y, rotate, scale on the same element, without wrappers.
Motion.
Production-grade animation for the web.
Available for React JavaScript Vue
- Free
Completely free to use, MIT licensed and open source.
- Production ready
Trusted by Framer and Figma across hundreds of thousands of sites.
- Hybrid engine
JavaScript and hardware-accelerated browser APIs in one library.
- Built for AI
Agent-compatible documentation, skills and API.
- Tiny footprint
APIs up to 90% smaller than their GSAP alternative.
01> Animation library
Animations that move.
Create high-performance web animations with Motion's easy-to-use API, from simple transforms to advanced interactive gestures.
>Scroll animation
Hardware-accelerated scroll-linked motion via ScrollTimeline.
>Native gestures
hover, press, and drag that feel native, not bolted on.
>Layout animation
Animate between any two layouts with a single layout prop.
>Spring physics
Real spring math for animations that naturally react to user input.
>Exit animation
AnimatePresence keeps elements alive so they can animate as they leave the DOM.
>Timeline sequences
variants, stagger, and timelines orchestrate complex motion.
>Motion values
useMotionValue drives animations and derived state in real time.
Copy, paste, ship.
Build previously complex effects, like magnetic cursors or infinite scrolling tickers, with 370+ copy and paste examples. Or adapt to your codebase using AI.
03> Showcase
Made with Motion.
Everything's possible with Motion. Here are some of the best creations from our expert Motion+ community.
Trusted by the world's leading teams.
Motion is deployed and sponsored by the best teams in the industry, powering UI animations across millions of sites.
The professional animation toolkit. Yours forever.
A production toolkit on top of the open source library: an agent-native AI Kit, premium components, examples, tutorials, an IDE transition editor, and a private community. One payment, yours forever.
- 1.1Motion expert
- 1.2MotionScore performance audit
- 1.3CSS spring generator
- 1.4Transition visualiser
- 1.5Documentation search
- 1.6Examples search
- Examples
Adapt 370+ examples to your codebase with your AI agent.
- Early access
Get access to new APIs before they're in general release.
- Tutorials
110+ step-by-step builds with live code.
- Transition editor
Visual transition editor in your IDE for Motion and CSS.
- Community
Private Discord and GitHub repo. Talk to the people building it.
Find & fix animation performance issues.
Audit any live website in under a minute. Every report grades you S through F, breaks the score down finding by finding, and hands your AI agent copy-paste fixes.
Pick your platform.
Drop Motion into the framework you're already using. Every API is documented per platform with live, editable examples.