Motion. A production-grade
animation library for the web.
Free and open source. Create stunning web animations for React, JavaScript and Vue.
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.
Made with Motion
Everything's possible with Motion. Here are some of the best creations from our expert Motion+ community.
Partners
Platinum sponsors
gold sponsors
Silver sponsors
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.
Production-ready animations
Unlock a vault of 330+ pre-built animations for JavaScript, React and Vue to copy & paste directly into your own project.
Plus, an ever-growing library of 100+ step-by-step tutorials written by the creator of Motion will teach you the official best practices and core principles behind each effect.
Master Motion
Level up with official examples, in-depth tutorials, and courses from top industry leaders.
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 controls for IDEs
Perfect your CSS and Motion transitions, directly in VS Code.
3
You're an expert in Motion, React and TypeScript.
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.
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.
Changelog
Feb 10, 2026
Feb 9, 2026
Feb 6, 2026
Examples
Tutorials
The Web Animations API is included with every browser, but only supports CSS timing functions. Let's supercharge it with GSAP's easing functions!
Motion is supported by the best in the industry.