A robust animation library for modern web projects using JavaScript, React, or 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.17
Jun 11, 2025
🤖 Introducing Motion for AI
Supercharge your LLM with Motion for AI:
Plus Motion+ Rules and vibe coding guides for Framer, Figma and v0.
Motion+
1.2
Jun 10, 2025
Added
Motion+ MCP server. Visualise spring and cubic bezier curves directly in your LLM. Access Motion+ docs as resources.
Blog:
Building the ultimate ticker
Jun 5, 2025
Ticker compoments are becoming common decorative features, but building a good one isn't easy. Let's take a look at the problem with CSS components, and how Motion+ Ticker aims to solve them.
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.
