CODEWITHSUNDEEP
javascriptanimationanimate.css
alejorivera
alejorivera

Reputation: 945

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

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>

Upvotes: 7

Views: 22378

Answers (5)

Вукашин Вујић
Вукашин Вујић

Reputation: 1

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

Upvotes: 0

DavieFL
DavieFL

Reputation: 61

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

Upvotes: 4

user20889
user20889

Reputation: 21

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>

Upvotes: 2

Jonathan Hine
Jonathan Hine

Reputation: 76

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>

Upvotes: 6

Nice-Guy
Nice-Guy

Reputation: 1524

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.

Upvotes: 0

Related Questions