How to add animation delay using Animate.css and ViewportChecker?

Question

I am trying to add a “delay” to various animated class elements on a specific web page using Daniel Eden animate.css version 3.5.1 and jQuery-viewport-checker version 1.8.7 from Dirk Groenen.

I tried using the setTimeout function, for example ...

setTimeout(function () { jQuery('.fadeinleft1').addClass("hidden").viewportChecker({ classToAdd: 'visible animated fadeInLeft', offset: 100 }); }, 500 ); 

But this clearly affects the hidden class. I need the animation to be delayed as it approaches the viewport, and I can delay each object accordingly. I searched for some time and simply could not find the answer.

Answer 1

Go to the figure, as soon as I ask the question, I find a fix that includes only adding css. No need to touch javascript. A very quick and easy way to achieve delayed animation using animate.css and viewport-checker. You do this by adding a css class that uses "animation delay".

JavaScript:

 jQuery('.fadeinleft').addClass("hidden").viewportChecker({ classToAdd: 'visible animated fadeInLeft', offset: 100 }); 

Create the following animated css delay you want and how much you want, and you can use them all over the world for all animations:

 .delay-1 { animation-delay: .25s; } .delay-2 { animation-delay: .5s; } .delay-3 { animation-delay: .75s; } .delay-4 { animation-delay: 1s; } 

Then all you have to do is add the classes to the animated elements as such:

 <div class="col-md-4 fadeinleft"> <a href="#"> <div class="box-border-wht"> <p>Title 1</p> <img src="/images/image1.jpg"> </div> </a> </div> <div class="col-md-4 fadeinleft delay-1"> <a href="#"> <div class="box-border-wht"> <p>Title 2</p> <img src="/images/image2.jpg"> </div> </a> </div> <div class="col-md-4 fadeinleft delay-2"> <a href="#"> <div class="box-border-wht"> <p>Title 3</p> <img src="/images/image3.jpg"> </div> </a> </div> 

That's all!