Motion for React
An open source animation library
for React
npm install motion
Table of Contents
Why Motion?
Motion is an animation library for making beautiful animations.
- The only library with first‑class APIs for React, JavaScript, and Vue.
- Powered by a hybrid engine that blends JavaScript flexibility with native browser APIs for 120fps GPU‑accelerated motion.
- Tiny footprint, tree‑shakable, and fully TypeScript‑typed.
🍦 Flavours
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
Motion Examples offers 100s of free and Motion+ examples for beginners and advanced users alike. Easy copy/paste code to kick‑start your next project.
⚡️ Motion+
Learn, Design, Build. Motion+ is a one-time fee, lifetime update membership that provides:
- 160+ premium Motion Examples
- Motion UI features like Cursor and Ticker
- Motion Studio animation editing for VS Code
alpha - Early access content
- Private Discord
🎨 Studio
Motion Studio is a versatile suite of developer tools allowing you to:
- Visually edit CSS and Motion easing curves in VS Code
- Generate CSS springs with LLMs
- Load Motion docs into your LLM
Get started with Motion Studio.
👩🏻⚖️ 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.
Partners
Framer
Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
Platinum
Gold
Silver