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>

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>

• javascript
• animation
• animate.css

5 Answers 5

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>

I also had the same issue. I found a workaround which was to add these inline styles:

style="-webkit-animation-duration: 3s;-moz-animation-duration: 3s;animation-duration: 3s;"

Make sure that you are your script is correct and that you are correctly typing "wow.js" OR "wow.min.js" for the minimal version. If not you will have animations but no wow.js delaying or scrolling.

    <script src='js/wow.min.js'></script>

    <script>
        new WOW().init();
    </script>

The Wow.js api uses seconds units for animations as well.

For example, data-wow-delay="2s" will work just fine. I'm not sure for about "1.2."

Try it out and let me know if that works for you.

I made it work this way:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>


<li><span class="wow animate__animated animate__fadeLeft" data-wow-delay="0.3s">Text1</span></li>
  <li><span class="wow animate__animated animate__fadeLeft" data-wow-delay="0.8s">Text2</span></li>
  <li><span class="wow animate__animated animate__fadeLeft" data-wow-delay="1.2s">Text2</span></li>er code here