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

Question

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?

i checked on github, they said there must be wow-sequence-delay like variable but i am not sure if it is implemented. — Kaleem Nalband, Jul 31 '18 at 14:43
i am talking about this https://github.com/matthieua/WOW/issues/176 — Kaleem Nalband, Jul 31 '18 at 14:43

score 0 · Accepted Answer · answered Jul 31 '18 at 15:07

0

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>

answered Jul 31 '18 at 15:07

Chaska

3,165
1
11
17

is there any other way, i mean where i can set a delay. without adding tags – Kaleem Nalband Jul 31 '18 at 15:27
Seems wow.js doesn't provide such setting, you may try to set the delay attribute for each element by using Javascript before initializing. – Chaska Jul 31 '18 at 15:34
thank you for your help. i will add delay attribute. – Kaleem Nalband Aug 01 '18 at 06:55

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

1 Answers1