• Notifications
      You have 2 unread messages

    • Delivery processing 10 min.

    • Order Complete1 hr

    • Tickets Generated3 hr

    • Delivery Complete6 hr

    • All notification
    • Erica Hughes

      There are many variations of passages...

      1 hr ago

    • Kori Thomas

      There are many variations of passages...

      58 mins ago

    • Ain Chavez

      There are many variations of passages...

      32 mins ago

    • Mark all as read
  • Elana SaintAdmin
    • Profile
    • Home
    • Inbox
    • Taskboard
    • Settings
    • Log in
  2. Animation
  3. Wow Animation

Wow Animation

WOW Example animation
1Setup wow.js
(You can link to another CSS animation library by changing wow.js settings)
<link rel="stylesheet" href="css/animate.css" >
2Link and activate wow.js
< script src="js/wow.min.js" > < /script > 
< script > 
  WOW.init();
< /script >
3Make an element revealable
(You can change this CSS class in the WOW settings to avoid name conflicts.)
Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it.
< div class="wow" > 
Content to Reveal Here
< /div >
4Choose the animation style
Pick an animation style in Animate.css , then add the CSS class to the HTML element
< div class="wow bounceInUp" > 
Content to Reveal Here
< /div >
ExtraAdvance Options

data-wow-duration: Change the animation duration
data-wow-delay: Delay before the animation starts
data-wow-offset: Distance to start the animation (related to the browser bottom)
data-wow-iteration: Number of times the animation is repeated

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
 </section>
 <section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10">
 </section>
SettingsCustomize Settings

boxClass: Class name that reveals the hidden box when user scrolls.

animateClass: Class name that triggers the CSS animations (’animated’ by default for the animate.css library)

offset: Define the distance between the bottom of browser viewport and the top of hidden box.
When the user scrolls and reach this distance the hidden box is revealed.

mobile: Turn on/off wow.js on mobile devices.

live: consatantly check for new WOW elements on the page.

wow = new WOW(
 {
 boxClass: 'wow', // default
 animateClass: 'animated', // default
 offset: 0, // default
 mobile: true, // default
 live: true // default
 }
 )
 wow.init();