Create stunning web animations with our free and open-source library for React, JavaScript and Vue.
Free and
open-source
Easy to use
Production-ready
Hybrid engine
Robot friendly
Tiny footprint
Animation library
Animations that move
Create high-performance web animations with Motion’s easy-to-use API — from simple transforms to advanced interactive gestures.
Simple API
Motion’s pick-up-and-play API is easy to start and fun to master.
Independent transforms
Animate
x,y,rotateZetc independently, without wrapper elements.Scroll animation
Smooth, hardware-accelerated scroll animations.
Exit animation
Motion's
AnimatePresencemakes it easy to animate elements as they exit.
Gestures
Hover, press and drag gestures that feel native, not “webby”.
Layout animation
Animate between different layouts with Motion’s industry-leading layout animation engine.
Timeline sequences
Variants, stagger and timelines make it easy to precisely orchestrate animations.
Spring physics
Real spring physics for great-feeling animations.
Also available for JavaScript and Vue
Premium components
Next-level animation APIs
Build previously complex effects, like magnetic cursors or infinite scrolling tickers, with Motion+ components. These next-level Motion APIs are built for maximum performance and customisation.
Whether it's a unique cursor, an animated counter, or a split-text reveal: These components will save you hours of dev time.
The Vault
Production-ready animations
Unlock a vault of 290+ pre-built animations for JavaScript, React and Vue to copy & paste directly into your own project.
Plus, an ever-growing library of step-by-step tutorials written by the creator of Motion will teach you the official best practices and core principles behind each effect.
Workflow
Your complete animation workflow
Building beautiful, performant animations is hard. You can waste hours tweaking curves, fighting AI with outdated information, or not knowing where to find help.
Motion+ provides the ultimate professional toolkit, empowering you to design with immediate feedback, code with AI-driven confidence, and collaborate with a vibrant community of 600+ Motion experts.
Visual editor alpha
Perfect your CSS and Motion bezier curves, directly in VS Code.
1
# Motion
2
3
You're an expert in Motion, React and TypeScript.
4
5
## Performance
6
7
- If animating a `transform` like `transform`, `x`, `y`, `scale` etc, then add style the component with `willChange: "transform"`.
8
- If animating `backgroundColor`, `clipPath`, `filter`, `opacity`, also add these values to `willChange`.
9
- Inside functions that will or could run every frame (hot functions), like the `motion` component's `onUpdate` prop, `useTransform` etc:
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 18 15" xmlns="http://www.w3.org/2000/svg"><path d="M 3 3 L 3 0 L 0 0" fill="transparent" height="3.0000000000001794px" id="GoWpJlHO9" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.52" stroke="rgb(255, 255, 255)" transform="translate(6 1)" width="3.0000000000001785px"/><path d="M 1.5 9 C 0.672 9 0 9 0 9 L 0 0 C 0 0 0.672 0 1.5 0 L 10.5 0 C 11.328 0 12 0 12 0 L 12 9 C 12 9 11.328 9 10.5 9 Z" fill="transparent" height="9px" id="idgKFZ7Io" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.52" stroke="rgb(255, 255, 255)" transform="translate(3 4)" width="12.000000000000178px"/><path d="M 0 0.75 L 1.5 0.75 M 13.5 0.75 L 15 0.75 M 9.75 0 L 9.75 1.5 M 5.25 0 L 5.25 1.5" fill="transparent" height="1.499999983439908px" id="YikxxnO0a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.52" stroke="rgb(255, 255, 255)" transform="translate(1.5 8)" width="15px"/></svg>)
Expert AI
Enhance your AI editor with custom rules written by the author of Motion.
8
Motion+
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"><path d="M 13.554 1.005 C 12.502 0.529 11.393 0.191 10.253 0 C 10.097 0.276 9.955 0.56 9.83 0.851 C 8.615 0.669 7.381 0.669 6.166 0.851 C 6.041 0.56 5.899 0.276 5.744 0 C 4.603 0.192 3.492 0.531 2.44 1.007 C 0.351 4.066 -0.215 7.049 0.068 9.989 C 1.291 10.883 2.661 11.564 4.116 12 C 4.444 11.564 4.734 11.101 4.983 10.616 C 4.51 10.441 4.053 10.226 3.618 9.971 C 3.733 9.889 3.845 9.804 3.953 9.722 C 6.516 10.915 9.484 10.915 12.047 9.722 C 12.157 9.811 12.269 9.895 12.382 9.971 C 11.946 10.226 11.488 10.442 11.014 10.618 C 11.263 11.102 11.553 11.564 11.881 12 C 13.338 11.565 14.708 10.885 15.932 9.99 C 16.264 6.58 15.364 3.625 13.554 1.005 Z M 5.342 8.181 C 4.553 8.181 3.901 7.472 3.901 6.6 C 3.901 5.729 4.53 5.014 5.34 5.014 C 6.149 5.014 6.796 5.729 6.782 6.6 C 6.768 7.472 6.146 8.181 5.342 8.181 Z M 10.658 8.181 C 9.868 8.181 9.218 7.472 9.218 6.6 C 9.218 5.729 9.847 5.014 10.658 5.014 C 11.468 5.014 12.11 5.729 12.096 6.6 C 12.082 7.472 11.462 8.181 10.658 8.181 Z" fill="rgb(255, 255, 255)" height="12px" id="B8X6A97SB" transform="translate(0 0)" width="16px"/></svg>)
Private Discord
Join 600+ developers sharing, helping, and building with Motion.
Sponsors
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.
Community
Selected by millions
Motion is the fastest-growing animation library in the world, with over 10 million monthly downloads on npm.
10 million
Motion
React Spring
GSAP
Anime.js
What's new
Always in Motion
Follow the latest library releases, inspiring examples, and step-by-step tutorials.
showcase
Made with Motion
Frameworks
Motion integrates with your favourite tools
From the biggest UI libraries to popular website builders, Motion works with them all.
