Wow.js doesn't load animations with delay of more than 1s. Why?

javascript animation animate.css
alejorivera picture alejorivera · Aug 19, 2014 · Viewed 16.3k times · Source

I'm using animate.css with wow.js.

The third one, with a data delay of more than one second, doesn't fadeInLeft. It fades in normally (not from left).

Anyone has encountered this problem before? How can I fix it?

--

This is my view. I have three list items on the page.

<li>
  <span class="fadeInLeft wow" data-wow-delay="300ms">Text1</span>
</li>
<li>
  <span class="fadeInLeft wow" data-wow-delay="800ms">Text2</span>
</li>
<li>
  <span class="fadeInLeft wow" data-wow-delay="1200ms">Text2</span>
</li>

Answer

Jonathan Hine picture Jonathan Hine · Jan 20, 2015

I know this thread is a tad old but figured I'd post what I know of this:

Try using a section class.

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="0.3s"><li>Text1</li></section>
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="0.8s"><li>Text2</li></section>
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="1.2s"><li>Text3</li></section>

Related questions

AOS (animate on scroll) library not working when selecting elements to animate with jQuery

I'm trying to animate H1 elements for many pages using AOS (animate on scroll). I have several pages that use the title so I'm selecting all the titles with jQuery. If I type in the attributes manually in each title …

Read More
CSS Animation onClick

How can I get a CSS Animation to play with a JavaScript onClick? I currently have: .classname { -webkit-animation-name: cssAnimation; -webkit-animation-duration:3s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes cssAnimation { from { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px); } to { -webkit-transform: rotate(0…

Read More
How to run two jQuery animations simultaneously?

Is it possible to run two animations on two different elements simultaneously? I need the opposite of this question Jquery queueing animations. I need to do something like this... $('#first').animate({ width: 200 }, 200); $('#second').animate({ width: 600 }, 200); but to run …

Read More