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>
Any help greatly appreciated!!
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.