A powerful animation library and developer tools for making beautiful animations.
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
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.
Exclusive APIs
Creative features and components with full source code via GitHub.
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+
1.4
Jul 2, 2025
Ticker now supports overflow! This makes it simple to place a ticker within a normal document flow and have the ticker effect extend out to the edges of the viewport.
Motion
12.23
Jul 2, 2025
Added
Add
.stop()and.cancel()methods touseDragControls().
Motion
12.22
Jul 1, 2025
Added
delayChildrennow acceptsstagger(), adding support for staggering out from any child, plus eased staggering.
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.
