7

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>
alejorivera
  • 935
  • 1
  • 10
  • 25

5 Answers5

6

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>
Jonathan Hine
  • 76
  • 1
  • 2
4

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;"

DavieFL
  • 61
  • 4
1

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>
user20889
  • 11
  • 1
  • I am using angular and somehow delay was not working. I copied this and placed it in index.html and it worked. Thank – Santosh Jan 01 '22 at 08:17
0

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.

Nice-Guy
  • 1,457
  • 11
  • 20
  • Thanks for your response! Didn't work, I tried using 1s, 2s, and 3s, and just the first one faded in from the left, the others did the regular fade in. Strange isn't it. – alejorivera Aug 19 '14 at 00:32
  • I think I've figured it out. You need to be consistent with your units. Therefore, all of them need to be "s." Try these values: 0.3s 0.8s and 1.2s. I just tried them and they work for me. – Nice-Guy Aug 19 '14 at 01:26
  • I also recommend moving wow before fadeInLeft so that the value of the class attributes is "wow fadeInLeft" If that still doesn't work, you are probably not initializing the plugin properly, or some other issue outside of the scope of this post. – Nice-Guy Aug 19 '14 at 01:34
  • Thank you. Didn't work still. I'm unsure of what it could be, but thanks for trying to help! – alejorivera Aug 19 '14 at 01:49
  • You're welcome. I'm not sure what the issue is, then. I would take a look at your own markup code for issues, and make sure the library is behaving as expected, maybe even sned a link to the page. – Nice-Guy Aug 19 '14 at 03:14
0

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
Вукашин Вујић
  • 1
  • 1