Category: Animation

Latest free Vue.js components, plugins, and other related libraries for handling animations on your web applications.

Performant Ripple Effect For Vue

Material Design inspired performant ripple click effect for Vue.js.

January 13, 2022 Animation

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.

January 4, 2022 Animation

Text Scramble Effect In Vue – Glitched Writer

A Vue.js wrapper around the Glitched Writer that applies a stylish scramble/decode effect to your text.

December 15, 2021 Animation, Text

Cool Confetti Explosion In Vue

A Vue component to create an awesome confetti explosion on your application.

November 30, 2021 Animation

Material Ripple Effect Directive For Vue.js – v-wave

A full-featured Material Design ripple click animation implementation that is easy to use as a Vue.js directive.

November 15, 2021 Animation

Animate On Scroll For Components Or Elements – Vue Aos

A Vue.js library that applies Animate On Scroll to components or elements within your app.

October 25, 2021 Animation

Vue Directive For Animate.css

The easiest way to implement Animate.css based CSS3 animations on your Vue.js web app. How to use it: 1. Import and register the animate.css directive. import Vue from ‘vue’; import VAnimateCss from ‘v-animate-css’; Vue.use(VAnimateCss); 2. Apply an animate.css powered animation to the element. <div v-animate-css=”‘fadeIn'”> Fade In On Page Load </div> 3. Trigger the animation on click or hover. <div v-animate-css.click=”‘fadeIn'”> Click Me </div> <div v-animate-css.hover=”‘fadeIn'”> Hover Over Me </div> 4. You can also config the animation using a JS object: <div v-animate-css.click=”animationObject”> Click Me </div> animationObject:{ classes: ‘fadeIn’, delay: 100, duration: 3000 } 5. Determine whether to loop the

October 18, 2021 Animation