# motion

> An animation library for JavaScript and React.

Latest version **13.2.0** (published 2026-09-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install motion
pnpm add motion
yarn add motion
bun add motion
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 13.2.0 |
| Published | 2026-09-02 |
| First published | 2013-12-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 701 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 33511 |
| Author | Matt Perry |
| Maintainers | popmotion, motionone |
| Keywords | javascript animation, react animation, react, three, 3d, animation, gestures, drag, spring, popmotion, framer, waapi |

## Links

- npm: https://www.npmjs.com/package/motion
- Repository: https://github.com/motiondivision/motion
- Homepage: https://github.com/motiondivision/motion#readme
- Issues: https://github.com/motiondivision/motion/issues
- npm.io page: https://npm.io/package/motion

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.4.0
- [framer-motion](https://npm.io/package/framer-motion.md) ^13.2.0

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 13.2.0 (latest) — 2026-09-02
- 13.1.1-alpha.0 (canary) — 2026-08-20
- 10.5.0-alpha.1 (alpha) — 2021-12-11
- 10.0.0-rc.6 (rc) — 2021-09-12
- 3.2.4 (beta) — 2016-07-21
- 13.1.1 — 2026-08-20
- 13.1.0 — 2026-08-10
- 13.0.0 — 2026-08-05
- 12.43.0 — 2026-07-28
- 12.42.2 — 2026-06-30
- 12.42.1 — 2026-06-30
- 12.42.0 — 2026-06-25
- 12.41.0 — 2026-06-23
- 12.40.0 — 2026-05-21
- 12.39.0 — 2026-05-18
- … 429 more at https://npm.io/package/motion/versions

## README

<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+](#-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 <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 330+ [official examples](https://motion.dev/examples), with copy-paste code that'll level-up your animations whether you're a beginner or an expert.

Over 100 examples come with a full step-by-step [tutorial](https://motion.dev/tutorials).

## ⚡️ Motion+

A one-time payment, lifetime-updates membership:

-   **330+ examples**
-   **100+ tutorials**
-   **Premium APIs** like [Cursor](https://motion.dev/docs/cursor) and [Ticker](https://motion.dev/docs/react-ticker)
-   **Transition editor** for Cursor and VS Code
-   **AI skills**
-   **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.

<a href="https://framer.link/FlnUbQY">
  <img alt="Framer" src="https://github.com/user-attachments/assets/22a79be7-672e-4336-bfb7-5d55d1deb917" width="250px" height="150px">
</a>

Motion drives the animations on the Cursor homepage, and is working with Cursor to bring powerful AI workflows to the Motion examples and docs.

<a href="https://cursor.com">
  <img alt="Cursor" src="https://github.com/user-attachments/assets/81c482d3-c2c2-4b35-bbcf-933b28d5b448" width="250px" height="150px" />
</a>

### Platinum

<a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/f9ce44b4-af28-4770-bb6e-9515b474bfb2" width="250px" height="150px"></a> <a href="https://figma.com"><img alt="Figma" src="https://github.com/user-attachments/assets/1077d0ab-4305-4a1f-81c8-d5be8c4c6717" width="250px" height="150px"></a> <a href="https://sanity.io"><img alt="Sanity" src="https://github.com/user-attachments/assets/80134088-f456-483f-8edd-940593c120ce" width="250px" height="150px"></a> <a href="https://animations.dev"><img alt="Sanity" src="https://github.com/user-attachments/assets/7c5ab87d-c7d9-44b4-9c7e-f9e6a9f3ba3b" width="250px" height="150px"></a> <a href="https://clerk.com?utm_campaign=motion"><img alt="Clerk" src="https://github.com/user-attachments/assets/16789f85-eaf4-46fb-9961-b3e66d33afbc" width="250px" height="150px"></a>

### Gold

### Silver

<a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/28eddbe5-1617-4e74-969d-2eb6fcd481af" width="150px" height="100px"></a> <a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/f16e3eb9-f0bd-4ad1-8049-f079a3d65c69" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/2c44e7f4-5c2a-4714-9050-1570538665ff" width="150px" height="100px"></a> <a href="https://bolt.new"><img alt="Bolt.new" src="https://github.com/user-attachments/assets/7932d4b2-bb6c-422e-82b9-6ad78a7e3090" width="150px" height="100px"></a>

### Personal

-   [OlegWock](https://sinja.io)
-   [Lambert Weller](https://github.com/l-mbert)
-   [Jake LeBoeuf](https://jklb.wf)

---
_Source: https://npm.io/package/motion · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._