01
Independent transforms
Animate x, y, rotate, scale on the same element, without wrappers.
Motion.
Production-grade animation for the web.
Get startedGet started
>Available for React JavaScript Vue
ReactJavaScriptVueMotion 12.42.1
- 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.
01Animation library
Animations that move.
Create high-performance web animations with Motion's easy-to-use API, from simple transforms to advanced interactive gestures.
- hover
- press
- drag
06
Exit animation
AnimatePresence keeps elements alive so they can animate as they leave the DOM.
08
Motion values
useMotionValue drives animations and derived state in real time.
02Examples
Copy, paste, ship.
Build previously complex effects, like magnetic cursors or infinite scrolling tickers, with 400+ copy and paste examples. Or adapt to your codebase using AI.
03Workflow
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, 400+ example sources, performance audits and production-ready CSS springs directly to your agent.
Explore AI KitExplore AI Kit›
Begin with production-ready motion.
Browse performance-rated animated sections, install the source and inherit the design tokens your project already uses.
Browse Motion UIBrowse Motion UI
04Showcase
Made with Motion.
Everything's possible with Motion. Here are some of the best creations from our expert Motion+ community.
05Updates
Latest from Motion.
Release notes and magazine stories from the Motion team.
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:
Added
- Motion UI launches with 26 sections and 35 components.
- Read the announcement.
Fixed
animateView: Cropped group layers now animateborder-radiusfrom the old to new radius.
Fixed
animateView: Old layer fade out now cancelled when defining.new().
Changed
animateView: Layers are automatically grouped to match their DOM-hierarchy. New.group(false)method opts-out.
Fixed
animateView: Auto-crop is now aspect-ratio aware, disabling crops for matching aspect-ratios.animateView: Disabled automaticborder-radiusanimation.
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.
06Sponsors
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.
08Documentation
Choose your runtime
Start with the API built for your project.