Leaps

Reveal

Reveal component used to apply CSS animation class to the element when it enters the view-port. You can create your desired animation, or use animista, (animate.css)[https://daneden.github.io/animate.css/], or any similar library.

Install Plug-in

Reveal component requires to install it as a global plugin.

import Vue from 'vue';
import { Reveal, install as RevealPlugin } from '../dist/leaps';

Vue.use(RevealPlugin, { options });
Vue.component('Reveal', Reveal);

Example

<reveal name="bounce">
  <div class="box"></div>
</reveal>

Component Props

Prop Default Description
duration '1s' Length of time that an animation takes to complete one cycle.
delay '0s' When an animation starts. accepts negative values
iteration 1 The number of times an animation cycle should be played before stopping.
animateClass 'animated' Main class name that triggers animation
name '' The animation class name
tag 'span' Element tag name
visible false Set if element starts visible or hidden

←