Motion.Production-grade
animation library
for the web.
- 01 / Free
- Completely free to use, MIT licensed and open source.
- 02 / Production ready
- Trusted by Framer and Figma across hundreds of thousands of sites.
- 03 / Hybrid engine
- JavaScript and hardware-accelerated browser APIs in one library.
- 04 / Built for AI
- Agent-compatible documentation, skills and API.
- 05 / 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 430+ 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, 430+ 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
- 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
Added
- Hardware acceleration for
backgroundColorin supported browsers. - Hardware acceleration for SVG elements.
Fixed
AnimatePresence: Exiting children no longer interleave with entering children, which could reorder and remount children present in both renders.motion: Throw error when passing a custommotioncomponent an incorrectreftype.
- Hardware acceleration for
Added
- MCP:
search-motion-codexnow returns Motion UI components and sections (Motion+ / React) as full multi-file paste-ready source — same delivery model as examples, baked into the package.
- MCP:
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.