vue-motion-one-animation

Animation Library for Vue Wrapper For Motion One Plugin

by

Vue Motion One is a wrapper on top of Motion One, an animation library, built on the Web Animations API for the smallest file and fastest performance.

vue animation, vue animation examples, vue animation library, bs vue animation, vue animation on scroll, vue trigger css animation, vue2 animate

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-motion-one motion

# NPM
$ npm i vue-motion-one motion

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. Animate 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 one or more items 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 animation sequences with 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>

Vue Wrapper For Motion One Animation Library, vue motion one Plugin/Github, vue multiple transitions

See Demo And Download

Demo
Download

Official Website(wobsoriano): Click Here

This superior jQuery/javascript plugin is developed by wobsoriano. For extra Advanced Usages, please go to the official website.

Leave a Comment