# motion-v

> Motion for Vue

Latest version **2.5.1** (published 2026-09-28) · MIT license · 0 weekly downloads

## Install

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

## Health

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

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.5.1 |
| Published | 2026-09-28 |
| First published | 2024-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 568.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2211 |
| Maintainers | hp0844182 |
| Keywords | vue, motion, motionone, framer-motion |

## Links

- npm: https://www.npmjs.com/package/motion-v
- Repository: https://github.com/motiondivision/motion-vue
- Issues: https://github.com/motiondivision/motion-vue/issues
- npm.io page: https://npm.io/package/motion-v

## Dependencies (4)

- [hey-listen](https://npm.io/package/hey-listen.md) ^1.0.8
- [motion-dom](https://npm.io/package/motion-dom.md) ^13.3.0
- [motion-utils](https://npm.io/package/motion-utils.md) ^13.3.0
- [framer-motion](https://npm.io/package/framer-motion.md) ^13.3.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

- 2.5.1 (latest) — 2026-09-28
- 2.5.0 — 2026-09-27
- 2.4.4 — 2026-09-16
- 2.4.3 — 2026-09-16
- 2.4.2 — 2026-09-05
- 2.4.1 — 2026-09-04
- 2.4.0 — 2026-08-15
- 2.3.0 — 2026-06-08
- 2.2.1 — 2026-04-11
- 2.2.0 — 2026-03-23
- 2.1.0 — 2026-03-21
- 2.0.1 — 2026-03-15
- 2.0.0 — 2026-02-24
- 2.0.0-beta.5 — 2026-02-23
- 2.0.0-beta.4 — 2026-02-16
- … 93 more at https://npm.io/package/motion-v/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 for Vue</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/motion-v" target="_blank">
    <img src="https://img.shields.io/npm/v/motion-v.svg?style=flat-square" />
  </a>
  <a href="https://www.npmjs.com/package/motion-v" target="_blank">
  <img src="https://img.shields.io/npm/dm/motion-v.svg?style=flat-square" />
  </a>
  <a href="https://twitter.com/motiondotdev" target="_blank">
  <img src="https://img.shields.io/twitter/follow/framer.svg?style=social&label=Follow"  />
  </a>
</p>

<br>
<hr>
<br>

Motion for Vue is an open source, production-ready library that’s designed for all creative developers.

It's the only animation library with a hybrid engine, combining the power of JavaScript animations with the performance of native browser APIs.

It looks like this:

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

It does all this:

- Springs
- Keyframes
- Layout animations
- Shared layout animations
- Gestures (drag/tap/hover)
- Scroll animations
- SVG paths
- Exit animations
- Server-side rendering
- Independent transforms
- Orchestrate animations across components
- CSS variables

...and a whole lot more.

## Get started

### 🐇 Quick start

Install `motion-v` via your package manager:

```
npm install motion-v
```

Then import the `motion` component:

```vue
<script setup>
import { motion } from 'motion-v'
</script>

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

## ⚡️ 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).

### 💎 Contribute

- Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion-vue/blob/master/CONTRIBUTING.md) has you covered.
- [Join our discord ](https://discord.com/invite/dCBuRgdNDG)

### 👩🏻‍⚖️ License

- Motion for Vue is MIT licensed.

## ✨ 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.

<a href="https://www.framer.com?utm_source=motion-readme">
  <img alt="Framer" src="https://github.com/user-attachments/assets/0404c7a1-c29d-4785-89ae-aae315f3c759" width="300px" height="200px">
</a>

### Platinum

<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/c0496f09-b8ee-4bc4-85ab-83a071bbbdec" width="300px" height="200px"></a> <a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/a93710bb-d8ed-40e3-b0fb-1c5b3e2b16bb" width="300px" height="200px"></a>

### Gold

<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/1d5f2571-8bc3-4367-9fec-14d291168ff0" width="200px" height="120px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/33d1cb98-238a-4eed-a0df-9c7ab097d65b" width="200px" height="120px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/28eddbe5-1617-4e74-969d-2eb6fcd481af" width="200px" height="120px"></a> <a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/abc473bd-07ae-4a7d-9833-efe9dadb3773" width="200px" height="120px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/ac282433-6adb-4ad2-9fd2-5c6ee513c14b" width="200px" height="120px"></a> <a href="https://notion.com"><img alt="Notion" src="https://github.com/user-attachments/assets/a27a6033-3cb0-4232-a6bb-625e1824517b" width="200px" height="120px"></a>

### Silver

<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://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/e32205a7-3ab1-41ec-8729-a794058fd655" 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 sponsors

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

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