Smooth Motion Effect Library For Vue – use-motion

An animation library that adds smooth motion effects to components in your Vue 2 or Vue 3 app.

Basic Usage:

<template>
  <div
    v-motion="'block'"
    :initial="{
      y: 200,
      opacity: 0.25,
    }"
    :enter="{
      y: 0,
      x: 0,
      opacity: 1,
    }"
  />
</template>

Preview:

Changelog:

04/02/2022

• v2.0.0beta18

03/15/2022

• feat: visible-once

02/23/2022

• feat(ssr): initial getSSRProps implementation

01/04/2022

• v2.0.0beta9

01/03/2022

• feat(ssr): update ssr types

Download Details:

Author: vueuse

Live Demo: https://vue-use-motion.netlify.app/

Download Link: https://github.com/vueuse/motion/archive/main.zip

Official Website: https://github.com/vueuse/motion

Install & Download:

# Yarn
$ yarn add @vueuse/motion

# NPM
$ npm i @vueuse/motion