# React / JavaScript
npm install motion
# Vue
npm install motion-v- 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.
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.
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.
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
- Motion is MIT licensed.
- Want to contribute to Motion? Our contributing guide has you covered.
Motion is sustainable thanks to the kind support of its sponsors.
Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
