@vueuse/motion

🤹 vue-use-motion

Vue Composables putting your components in motion

• 🧩 Written in TypeScript.
• 🏎 Smooth animations based on Popmotion.
• 🎮 Declarative API.
• 🤟 Vue 2 & 3 support using vue-demi.
• 🏋️‍♀️ Lightweight with <15kb bundle size

🌍 Documentation

This repository is still experimental, the API might be subject to changes.

Last update: 08/02/2021

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-demi'
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="'smoothestDiv'"
    :initial="{
      opacity: 0,
      y: 100,
    }"
    :enter="{
      opacity: 1,
      y: 0,
    }"
  />
</template>

<script setup>
import { useMotions } from '@vueuse/motion'

// Get access to motion controls using useMotions
const { smoothestDiv } = useMotions()

// From smoothest div to biggest div real quick 😎
smoothestDiv.apply({ scale: 4 })
</script>

If you want to know more about what properties you can animate, consider taking a look at Motion Properties.

If you want to know more about how to create your own animations styles, consider taking a look at Transition Properties.

If you want to know more about what are variants and how you can use them, consider taking a look at Variants.

If you want to know more about how to control your declared variants, consider taking a look at Motion Controls.

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.

👋