Motion for React

An open source animation library
for React

NPM License

npm install motion

Why Motion?
???? Platforms
???? Examples
⚡️ Motion+
????????‍⚖️ License
???? Contribute
✨ 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

import { motion } from "motion/react"

function Component() {
    return <motion.div animate={{ x: 100 }} />
}

Get started with Motion for React.

Note: Framer Motion is now Motion. Import from motion/react instead of framer-motion.

JS

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 & tutorials

Browse 330+ official examples, with copy-paste code that'll level-up your animations whether you're a beginner or an expert.

Over 100 examples come with a full step-by-step tutorial.

⚡️ Motion+

A one-time payment, lifetime-updates membership:

330+ examples
100+ tutorials
Premium APIs like Cursor and Ticker
Transition editor for Cursor and VS Code
AI skills
Private Discord
Early access content

Get Motion+

????????‍⚖️ 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.

Become a sponsor

Partners

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.