motion

<h1 align="center"> <img width="35" height="35" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" /><br />Motion</h1>
<h3 align="center">
  An open source animation library<br />for JavaScript, React and Vue
</h3>

<p align="center">
  <a href="https://www.npmjs.com/package/motion" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/v/motion?color=0368FF&label=version" alt="npm version"></a>
  <a href="https://www.npmjs.com/package/motion" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/dm/framer-motion?color=8D30FF&label=npm" alt="npm downloads per month"></a>
  <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.jsdelivr.com/package/npm/motion"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/framer-motion?logo=jsdeliver&color=FF4FBA"></a>
  <img alt="NPM License" src="https://img.shields.io/npm/l/motion?color=FF2B6E">
  <a target="_blank" rel="noopener noreferrer nofollow" href="https://score.motion.dev/site/motion.dev?utm_source=github&utm_medium=readme-badge"><img height="20" alt="MotionScore grade" src="https://api.motion.dev/score/badge?url=motion.dev"></a>
</p>

```bash
# React / JavaScript
npm install motion

# Vue
npm install motion-v
```

## Table of Contents

1. [Why Motion?](#why-motion)
2. [🍦 Platforms](#-platforms)
3. [🎓 Examples](#-examples)
4. [🎨 Motion Studio](#-motion-studio)
4. [🤖 Using Motion with AI](#-using-motion-with-ai)
5. [⚡️ Motion+](#-motion)
6. [👩🏻‍⚖️ License](#-license)
7. [💎 Contribute](#-contribute)
8. [✨ 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 <motion.div animate={{ x: 100 }} />
}
```

Get started with [Motion for React](https://motion.dev/docs/react).

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

### JS

```javascript
import { animate } from "motion"

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

Get started with [JavaScript](https://motion.dev/docs/quick-start).

### Vue

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

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

Get started with [Motion for Vue](https://motion.dev/docs/vue).

## 🎓 Examples & tutorials

Browse 450+ [official examples](https://motion.dev/examples), with copy-paste code that'll level-up your animations