Seriously stumped with WOW.js and integrating with animate.css

Question

I'm working on putting together a portfolio site. It's coming along nicely, but I've hit a real shag.

I'm using one page, and have made four divs thus far to break up my work. I'll have graphic design pieces coming in from one side or the other as the user scrolls.

Now, I found WOW.js which is supposed to do precisely what I want it to, ie. make a graphic of mine show up only when the user scrolls down to it. BUT for the life of me, I cannot get it to work, and it's supposed to be so simple, doge style. Such amaze!

The graphic in question is a heart, and animate.css has a great 'pulse' bit of CSS I want to use. WOW.js is supposed to be fabulously with animate.css. But I'm completely lost. My JS skills are still very basic, so please be patient.

As the WOW.js docs state, I've linked to it with:

<link rel="stylesheet" href="css/animate.css">

(my CSS folder is named public, but I can't see that making a difference...?)

This goes at the bottom of my index page:

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

I added the CSS class to an HTML element like so:

<div class="wow">  Content to Reveal Here  </div >

Then you're supposed to add the animate.css style to the element:

<div class="wow pulse">  Content to Reveal Here  </div >

But I'm missing something, because nothing is working. I've googled this and I'm not the only person who's had issues with WOW.js, but I've tried everything, and now I turn to you.

Under the customize settings on the docs, it suggests advanced settings:

wow = new WOW(
    {
    boxClass:     'wow',      // default
    animateClass: 'animated', // default
    offset:       0          // default
   }
)
wow.init();

I'm thinking since this isn't SO AMAZE at all, there's gotta be another way for me to do this, but still be able to use a CSS animation.

LAST question: how do I make the pulse animation continue? It pulses a few times, then stops, but I want it to continue over and over. Suggestions?

Answer 1

Just put this code in your index:

<script src="//cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js"></script>
<script>new WOW().init();</script>

no need to call for

<script src="wow.js"></script>