Motion logo
Motion for React

An open source animation library
for React

npm version npm downloads per month jsDelivr hits (npm) NPM License

```bash npm install motion ``` ## Table of Contents 1. [Why Motion?](#why-motion) 2. [🍦 Platforms](#-platforms) 3. [🎓 Examples](#-examples) 4. [⚡️ Motion+](#-motion) 5. [👩🏻‍⚖️ License](#-license) 6. [💎 Contribute](#-contribute) 7. [✨ Sponsors](#-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](https://motion.dev/docs/react), [JavaScript](https://motion.dev/docs/quick-start) and [Vue](https://motion.dev/docs/vue).
React ```jsx import { motion } from "motion/react" function Component() { return } ``` Get started with [Motion for React](https://motion.dev/docs/react).
JavaScript ```javascript import { animate } from "motion" animate("#box", { x: 100 }) ``` Get started with [JavaScript](https://motion.dev/docs/quick-start).
Vue ```html ``` Get started with [Motion for Vue](https://motion.dev/docs/vue).
## 🎓 Examples Browse 100+ free and 180+ premium [Motion Examples](https://motion.dev/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](https://motion.dev/docs/cursor) and [Ticker](https://motion.dev/docs/react-ticker) - **Visual editing** for VS Code (alpha) - **Private Discord** - **Early access content** [Get Motion+](https://motion.dev/plus) ## 👩🏻‍⚖️ License - Motion is MIT licensed. ## 💎 Contribute - Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion/blob/master/CONTRIBUTING.md) has you covered. ## ✨ Sponsors Motion is sustainable thanks to the kind support of its sponsors. [Become a sponsor](https://motion.dev/sponsor) ### Partner Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed. Framer ### Platinum Linear Figma Sanity ### Gold Tailwind Emil Kowalski Liveblocks Luma Notion LottieFiles ### Silver Frontend.fyi Firecrawl Puzzmo Bolt.new ### Personal - [OlegWock](https://sinja.io) - [Lambert Weller](https://github.com/l-mbert) - [Jake LeBoeuf](https://jklb.wf) - [Han Lee](https://github.com/hahnlee)