A robust animation library for modern web projects using JavaScript, React, or Vue.
Free and
open-source
Easy to use
Production-ready
Hybrid engine
Powerful animations
Create smooth, high-performance animations with Motion’s easy-to-use API—from simple transforms to advanced interactive gestures.
Simple
Transforms
Scroll
Exit animations
Springs
Gestures
Layout animations
Sequencing
Motion is supported by the finest in the industry
Motion is made possible thanks to our amazing sponsors.
Learn Motion
Learn Motion for React with interactive courses and expert-led videos.
Advanced features
Upgrade to Motion+ for lifetime access to premium APIs, an extensive library of examples, early access to new features, and a private Discord community and more.
100+ premium examples
A growing collection of high-quality, ready-to-use examples for JavaScript, React and Vue.
Rotate the square slower
AI-powered editing
Open examples in Vercel’s v0 AI editor and tweak as needed.
1
# Motion
2
3
You're an expert in Motion, React and TypeScript.
4
5
## Performance
6
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:
Motion Expert Copilot
A .cursorrules that guides AI editors with best practices.
8
Motion+
Private Discord
Stay updated with Motion releases, showcase your work, and get support.
UI library integrations
Includes integration examples, starting with Radix.
Motion Showcase
All the beautiful sites featured in the Framer Gallery are powered by Motion. Here are some more amazing interactions made by developers with its flexible APIs.
