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. [🍦 Flavours](#-flavours) 3. [🎓 Examples](#-examples) 4. [🎨 Studio](#-studio) 5. [⚡️ Motion+](#-motion) 6. [👩🏻‍⚖️ License](#-license) 7. [💎 Contribute](#-contribute) 8. [✨ Sponsors](#-sponsors) ## Why Motion? Motion is an animation library for making beautiful animations. * The **only** library with first‑class APIs for React, JavaScript, **and** Vue. * Powered by a **hybrid engine** that blends JavaScript flexibility with native browser APIs for **120fps GPU‑accelerated** motion. * Tiny footprint, tree‑shakable, and fully TypeScript‑typed. ## 🍦 Flavours 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 [Motion Examples](https://motion.dev/examples) offers 100s of free and Motion+ examples for beginners and advanced users alike. Easy copy/paste code to kick‑start your next project. ## ⚡️ Motion+ Learn, Design, Build. [Motion+](https://motion.dev/plus) is a one-time fee, lifetime update membership that provides: - 160+ premium Motion Examples - Motion UI features like Cursor and Ticker - Motion Studio animation editing for VS Code `alpha` - Early access content - Private Discord [Get Motion+](https://motion.dev/plus) ## 🎨 Studio ![Video of bezier curve editing](https://framerusercontent.com/images/KO5dnHOUSNGb9S73p1J7nLhoFI.gif) Motion Studio is a versatile suite of developer tools allowing you to: - Visually edit CSS and Motion easing curves in VS Code - Generate CSS springs with LLMs - Load Motion docs into your LLM Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start). ## 👩🏻‍⚖️ 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. ### Partners #### Framer Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed. Framer ### Platinum Tailwind Linear ### Gold Vercel Liveblocks Luma Emil Kowalski ### Silver Frontend.fyi Firecrawl Puzzmo ### Personal - [OlegWock](https://sinja.io) - [Lambert Weller](https://github.com/l-mbert) - [Jake LeBoeuf](https://jklb.wf) - [Han Lee](https://github.com/hahnlee)