Motion for React

An open source animation library
for React

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.

import { motion } from "motion/react"

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

import { animate } from "motion"

animate("#box", { x: 100 })

<script>
    import { motion } from "motion-v"
</script>

<template> <motion.div :animate={{ x: 100 }} /> </template>

🎓 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

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

Partner

Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.

Platinum

Gold

Silver

Personal

• OlegWock
• Lambert Weller
• Jake LeBoeuf
• Han Lee