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

Question

I am trying to add a "delay" to different animated class elements on a particular web page using Daniel Eden's animate.css version 3.5.1 and jquery-viewport-checker version 1.8.7 by Dirk Groenen.

I tried to use setTimeout Function like ...

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

But that obviously affects the hidden class as well. I need just the animation delayed as it reaches viewport and I can delay each object accordingly. Been looking for sometime and just cannot find the answer yet.

Solution 1

Go figure, as soon as I ask a question, I find a fix that involves only adding css. Do not need to touch the javascript. Very quick and easy way to achieve delayed animation when using animate.css and viewport-checker. You do it 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 delay css however you want and how many you want and you can use them globally on 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 need 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 is it!

Solution 2

I'm not quite sure why you're using viewportChecker(), or any javascript/jQuery at all. The solution you posted is using jQuery to add the hidden css class to your element (hidden has been replaced by d-none as of Bootstrap 4), but this is unnecessary as the animated class will automatically handle this for you. The goal of Animate.css is to provide efficient, seamless animations without superfluous javascript/jQuery code.

Because Animate.css uses the animation(-name) css property to animate elements, it therefore respects the animation-delay css property. Your solution should work even if you entirely remove the jQuery code (as explained above).