Motion
An open source animation library
for JavaScript, React and Vue
# React / JavaScript
npm install motion
# Vue
npm install motion-v
Table of Contents
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
import { motion } from "motion/react"
function Component() {
return <motion.div animate={{ x: 100 }} />
}
Get started with Motion for React.
JavaScript
import { animate } from "motion"
animate("#box", { x: 100 })
Get started with JavaScript.
Vue
<script>
import { motion } from "motion-v"
</script>
<template> <motion.div :animate={{ x: 100 }} /> </template>
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.
Partner
Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
Platinum
Gold
Silver