Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
May 25, 2023 14:31
May 25, 2023 14:31
May 25, 2023 14:31
May 25, 2023 14:31

🤹 @vueuse/motion

npm npm Netlify Status

Vue Composables putting your components in motion

  • 🏎 Smooth animations based on Popmotion
  • 🎮 Declarative API inspired by Framer Motion
  • 🚀 Plug & play with 20+ presets
  • 🌐 SSR Ready
  • 🚚 First-class support for Nuxt 3
  • Written in TypeScript
  • 🏋️‍♀️ Lightweight with <20kb bundle size

🌍 Documentation

👀 Demos

Quick Start

Let's get started by installing the package and adding the plugin.

From your terminal:

yarn add @vueuse/motion

In your Vue app entry file:

import { createApp } from 'vue'
import { MotionPlugin } from '@vueuse/motion'
import App from './App.vue'

const app = createApp(App)



You can now animate any of your component, HTML or SVG elements using v-motion.

      opacity: 0,
      y: 100,
      opacity: 1,
      y: 0,

To see more about how to use directives, check out Directive Usage.

To see more about what properties you can animate, check out Motion Properties.

To see more about how to create your own animation styles, check out Transition Properties.

To see more about what are variants and how you can use them, check out Variants.

To see more about how to control your declared variants, check out Motion Instance.


This package is heavily inspired by Framer Motion by [].

If you are interested in using WAAPI, check out!

I would also like to thank antfu, patak-dev and kazupon for their kind help!

If you like this package, consider following me on GitHub and on Twitter.