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) ### 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. Framer Motion drives the animations on the Cursor homepage, and is working with Cursor to bring powerful AI workflows to the Motion examples and docs. Cursor ### Platinum Linear Figma Sanity Sanity ### Gold 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)