Category: Animation

80+ latest free Vue.js animation components for handling animations on Vue 3 & Vue 2 applications.

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”‘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”animationObject”> Click Me </div> animationObject:{ classes: ‘fadeIn’, delay: 100, duration: 3000 } 5. Determine whether to loop the

Vue Height Tween Transition

A vue.js animation componentĀ used to tween the height of the parent of transitioning items. Preview: Changelog: v2.1.2 (03/13/2021) Fix clearing height when finished