A powerful animation library and developer tool suite for making beautiful animations with CSS, JS, React and Vue.
Free and
open-source
Easy to use
Production-ready
Hybrid engine
Robot friendly
Tiny footprint
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.
Updates
Always in Motion. Follow the latest releases, content, and examples. All in one feed.
Motion
12.19
Jun 23, 2025
Added
Motion for React's new usePageInView hook can pause videos and animations in background tabs.
Motion+
Jun 19, 2025
Motion+ users can now edit CSS and Motion bezier curves directly in VS Code!
Motion
Jun 17, 2025
Motion for VS Code adds Motion's powerful AI docs and tools for use directly in VS Code.
Enhance Copilot with Motion docs
Let Copilot generate CSS spring easing curves
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.
Power up VS Code
Edit and preview CSS and Motion bezier curves, directly in-editor.
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.
Learn Motion
Learn Motion for React with interactive courses and expert-led videos.
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.
