Home Animation Plugins Smooth Animation Motion Effects Component Library for Vue

Smooth Animation Motion Effects Component Library for Vue

Animation Plugins webcodeflow · October 27, 2022 · 0 Comment

vueuse / motion is a Vue Composable that aims to help you add animations to Vue applications using a simple yet powerful API.

It uses Popmotion, which allows you to pan between numbers, colors, and keyframes. It allows you to write the animation in two ways, from the template or from the script.

How to make use of it:

Install and download:

# Yarn
$ yarn add @vueuse/motion

# NPM
$ npm i @vueuse/motion

In your Vue application input 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 components, HTML, or SVG elements with v-Motion.

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

Smooth Motion Effect Library For Vue Plugin/Github, jquery animation library, best javascript animation library