Animate.css + Viewport Checker delay?

Question

I am using a tutorial that incorporates Animate.css and jQuery Viewport Checker to animate elements into my page(http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and-jquery/).

I am wondering how I can modify these animations so that each animation happens in succession instead of all at once. I.E. I want the first element to animate and then as that one is about to finish the next element starts to animate, etc.

Here is what I have so far which animates all the elements at once:

<div class="container">
    <div class="post">1</div>
    <div class="post2">2</div>
    <div class="post">3</div>
    <div class="post2">4</div>
    <div class="post">5</div>
    <div class="post2">6</div>
    <div class="post">7</div>
</div>

<script>
    $(document).ready(function(){
        $('.post').addClass("hidden").viewportChecker({
            classToAdd: 'visible animated fadeInUp',
            offset: 100
        });
        $('.post2').addClass("hidden").viewportChecker({
            classToAdd: 'visible animated fadeInDown',
            offset: 100
        });
    });
</script>

JSFIDDLE

Any help greatly appreciated!!

Answer 1

You actually don't need Viewport Checker for this at all. See this FIDDLE. It's less code and does the same thing. The only extra code I added had to do with the timing of the animations.

// ANIMATION SCRIPT
$(document).ready(function(){
    var i = 0;
    var posts = $('.container').children();

    function animateCircle() {
        if (i % 2 === 0) {
            $(posts[i]).addClass('visible animated fadeInUp');
        } else {
            $(posts[i]).addClass('visible animated fadeInDown');
        }
        i++;
        if (i <= posts.length) {
            startAnimation();
        }
    }

    function startAnimation() {
        setTimeout(function () {
            animateCircle();}, 1000);
    }

    posts.addClass('hidden');
    animateCircle(posts);
});

But if you want to use Check Viewport, you can change the animateCircle function to this:

function animateCircle() {
    if (i % 2 === 0) {
        $(posts[i]).viewportChecker({
            classToAdd: 'visible animated fadeInUp',
            offset: 100
        });
    } else {
        $(posts[i]).viewportChecker({
            classToAdd: 'visible animated fadeInDown',
            offset: 100
        });
    }
    i++;
    if (i <= posts.length) {
        startAnimation();
    }

Here is a FIDDLE showing it using jquery ViewportChecker.