@vueuse/motion

๐Ÿคน Vue Composables putting your components in motion

Usage no npm install needed!

<script type="module">
  import vueuseMotion from 'https://cdn.skypack.dev/@vueuse/motion';
</script>

README

๐Ÿคน @vueuse/motion

npm npm Netlify Status

Vue Composables putting your components in motion

  • ๐ŸŽ Smooth animations based on Popmotion
  • ๐ŸŽฎ Declarative API
  • ๐Ÿš€ Plug & play with 10+ presets
  • โœ… Supports Vue 2 & 3 using vue-demi
  • ๐Ÿšš Supports Nuxt using nuxt-use-motion
  • โœจ Written in TypeScript
  • ๐Ÿ‹๏ธโ€โ™€๏ธ Lightweight with <20kb bundle size

๐ŸŒ Documentation

๐Ÿ‘€ Demos

Quick Start

Let's get started quick 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)

app.use(MotionPlugin)

app.mount('#app')

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

<template>
  <div
    v-motion
    :initial="{
      opacity: 0,
      y: 100,
    }"
    :enter="{
      opacity: 1,
      y: 0,
    }"
  />
</template>

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 animations 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.

Credits

This package is heavily inspired by Framer Motion.

I would also like to thank antfu and patak for their kind help!

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

๐Ÿ‘‹