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 440+ 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, 440+ 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
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.
Fixed
- Guard animation
windowaccess in non-browser runtimes. AnimatePresence: Improved compat with React 19 strict mode.
- Guard animation
Added
- Toast stack: overlay notifications that fan into a scaled pile on a shared spring.
Added
Reorder: Multidimensional reorder.Reorder: Automatic axis detection.Reorder: RTL support.
Changed
- Removed optional
@emotion/is-prop-validdependency in favour of explicit<MotionConfig isValidProp={isPropValid}>.
Fixed
- Hardware-accelerated SVG elements correctly apply final style on animation complete.
AnimatePresence: Ensure nodes are marked as safe to remove when renderingpropagatewith nomotionchildren.
- Removed optional
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.
A View Transition API for the rest of us
The View Transition API can animate the impossible, but using it can be painful. Here's how Motion's animateView(), now free in the core library, fixes its rough edges.
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.
