Motion.Production-grade
animation library
for the web.
- 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.
Animations that move.
Create high-performance web animations with Motion's easy-to-use API, from simple transforms to advanced interactive gestures.
React & JavaScript animation examples.
Start with 450+ copy and paste examples, from scroll effects and gestures to carousels and typewriter animations.
Documentation for React, JavaScript and Vue.
Choose your runtime and start with the API built for your project.
Give every project a head start.
Equip your agent with specialist Motion context, then build from production-ready animated sections that inherit your design system.
Give your agent specialist Motion judgement.
Send the latest docs, 450+ example sources, performance audits and production-ready CSS springs directly to your agent.
Explore AI KitBegin with production-ready motion.
Browse performance-rated animated sections, install the source and inherit the design tokens your project already uses.
Browse Motion UI
Made with Motion.
Everything's possible with Motion. Here are some of the best creations from the Motion community.
Latest from Motion.
Release notes and magazine stories from the Motion team.
Added
- First release.
Added
AnimateView: View transitions for React 19.3, built on React'sViewTransition.
Added
- Hooks for Motion Editor.
Changed
springValue/useSpring: 80% reduction in time when retargeting.animate: 10% smaller.animate: 20% reduction in startup time.animate: 10% reduction in per-frame JS.frame: Frame scheduling 10% faster.
Fixed
animate: Fixed path drawing calculations.
Added
animate.addEffect()for registering effects that letsanimatedrive non-DOM subjects alongside DOM elements.threeEffect(motion/three) supporting Three.js objects, materials, shader uniforms, TSL uniform nodes and more.vgpuEffect(motion/vgpu) supporting shared uniforms,Effect/Draw/Computebindings ("params.time"), scene nodes, cameras, lights, materials, orbit controls, CSS colors and vector components.createEffectnow acceptstest,readandstepoptions and exposes bound motion values viaeffect.get().
Changed
- Reduced filesize and improved performance of
spring. MotionValueStateno longer caches values inlatest; effect renders read their motion values directly.set()drops itsuseDefaultValueTypeargument.
Fixed
- Guard animation
windowaccess in non-browser runtimes. AnimatePresence: Improved compat with React 19 strict mode.
- Guard animation
Introducing Motion Studio
A visual and agentic animation editor for your website. Edit Motion animations in a timeline alongside our new Ultramotion agent, and write the result to your code using your existing workflow.
Introducing Motion UI
Production-ready animated sections and components for React. Everything performance-graded with MotionScore, drop-in to your design system via shadcn tokens or AI.
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.
Animation guides and examples.
Go straight to popular techniques, comparisons and production-ready starting points.
Tools for the full animation workflow.
Build faster, check performance and move from an idea to production.