framer-motion
v5.0.0-alpha.22TypeScript
A simple and powerful JavaScript animation library
0/weekUpdated todayMITUnpacked: 2.8 MB
Published by Matt Perry
npm install framer-motion 
Motion for React
An open source animation library
for React
``bash`
npm install motion
Table of Contents
1. Why Motion?
2. 🍦 Platforms
3. 🎓 Examples
4. ⚡️ Motion+
5. 👩🏻⚖️ License
6. 💎 Contribute
7. ✨ Sponsors
Why Motion?
- Simple API: First-class React, JavaScript, and Vue packages.
- Hybrid engine: Power of JavaScript combined with native browser APIs for 120fps, GPU-accelerated animations.
- Production-ready: TypeScript, extensive test suite, tree-shakable, tiny footprint.
Batteries included: Gestures, springs, layout transitions, scroll-linked effects, timelines.
🍦 Platforms
Motion is available for React, JavaScript and Vue.
React
`jsx
import { motion } from "motion/react"
function Component() {
return
}
`
Get started with Motion for React.
JavaScript
`javascript
import { animate } from "motion"
animate("#box", { x: 100 })
`
Get started with JavaScript.
Vue
`html
``
Get started with Motion for Vue.
🎓 Examples
Browse 100+ free and 180+ premium Motion Examples, with copy-paste code that'll level-up your animations whether you're a beginner or an expert.
⚡️ Motion+
A one-time payment, lifetime-updates membership:
- 180+ premium examples
- Premium APIs like Cursor and Ticker
- Visual editing for VS Code (alpha)
- Private Discord
- Early access content
👩🏻⚖️ License
- Motion is MIT licensed.
💎 Contribute
- Want to contribute to Motion? Our contributing guide has you covered.
✨ Sponsors
Motion is sustainable thanks to the kind support of its sponsors.
$3
Motion powers the animations for all websites built with Framer, the web builder for creative pros. The Motion website itself is built on Framer, for its delightful canvas-based editing and powerful CMS features.
Motion drives the animations on the Cursor homepage, and is working with Cursor to bring powerful AI workflows to the Motion examples and docs.
$3
$3
$3