vue-wow

Features

• Ispire by wow.js Reveal CSS animation as you scroll down a page
• Easy to migrate from wow.js to vue-wow.
• Fast execution and lightweight code
• Works with Animate.css

Install

NPM

$ npm install git+https://github.com/guisoares2011/vue-wow

Yarn

$ yarn add https://github.com/guisoares2011/vue-wow

Integrate with Vue

import vWow from 'v-wow'
Vue.use(vWow);

Directive with parameters

<div class="holder" v-wow="{ 'animation-name': 'fadeInUp','animation-duration': '1s'}"></div>

| Parameters | Description | Default value | | -------------------- | ---------------------------- | ---------------| | animation-name | Name of css animation | - | | animation-duration | Duration of this animation | - | | animation-delay | Animation Delay | - |

Directive + Data Attributes

<div class="fadeInUp" v-wow data-wow-delay="0.2s" data-wow-duration="2s"></div>

| Attribute | Description | Default value | | ------------------- |---------------------------------| - | | data-wow-duration | Duration of this animation | - | | data-wow-delay | Animation Delay | - |

Example of Animation

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    -ms-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
  animation-timing-function: ease-out;
}