Search code examples
htmlcssanimationanimate.csswow.js

Animation of items with WOW.js which are in the viewport

i have a list of items which are contained in viewport, that means when i load the page they all are animated all at once. but i want them to animate one after the other. 

$(function(){
  new WOW().init();
})

here is my pen https://codepen.io/kaleem78/pen/oMEeqZ

how to animate the items in the viewport one after the other?

Solution

  • Add delay attribute to your tags:

    <ul>
  <li class='wow fadeInDown' data-wow-delay="0.5s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="1s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="1.5s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="2s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="2.5s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="3s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="3.5s">Item</li>
</ul>