Integration with animate.css when an item is visible

Question

I have just integrated this animate.css( http://daneden.me/animate/ ) into my website, but the animation happens when I load the page, therefore no animation can be seen if the element is down the bottom. But I have found this http://www.crivosthemes.com/theme/porto/index-2.html , I'm pretty sure that they used the same animate.css but the animation happens when I scroll to the element.

I just want to ask, how did they do that? Is there any jquery thing or just css?

Please provide instructions.

Thanks

Answer 1

maybe they implement

window.onscroll = function(){
    //codes
    if(window.scrollTop == 100){
    //do something
    }
}

you can use javascript to trigger animation on that element....example

window.onscroll = function(){
     element.style.animation = "myanimation 2s infinite";
}