Vue Wrapper For Motion One Animation Library

Install & Download:

# Yarn
$ yarn add vue-motion-one motion
# NPM
$ npm i vue-motion-one motion

Description:

A Vue 3 wrapper for Motion One, which is an animation library for building fast, performance animations.

How to use it:

1. Import and register the MotionOne plugin.

import { createApp } from 'vue'
import { MotionOnePlugin } from 'vue-motion-one'
import App from './App.vue'
const app = createApp(App)
app.use(MotionOnePlugin)
app.mount('#app')

2. Animated an element using the v-animate directive.

<template>
  <div
    v-animate
    // Motion One Keyframes
    :keyframes="{
      transform: 'rotate(90deg)'
    }"
    // Motion One Animation Options
    :options="{
      duration: 0.75
    }"
  />
</template>

3. Animate an element or multiple elements using the useAnimate hook.

import { ref, onMounted } from 'vue'
import { useAnimate } from 'vue-motion-one'
const boxRef = ref()
const { play } = useAnimate(
  boxRef,
  { transform: 'rotate(45deg)' },
  { duration: 0.5 }
)
onMounted(() => {
  play()
})

<template>
  <div class="box" ref="boxRef"></div>
</template>

4. Create complex sequences of animations using the useTimeline hook.

import { ref, onMounted } from 'vue'
import { useTimeline } from 'vue-motion-one'
const boxRef = ref()
const { play } = useTimeline(
  [
    ['.box', { x: 100 }],
    [boxRef, { x: 100 }]
  ],
  { duration: 1 }
)
onMounted(() => {
  play()
})

<template>
  <div class="box"></div>
  <div ref="boxRef"></div>
</template>

Preview:

Changelog:

v0.3.0 (10/21/2022)

• Require motion^10.4.0