Animate.css + Viewport Checker delay?
Solution 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.
Solution 2
i know this is an older post. But i found this by just typing "viewportchecker" at google.
Here is a working solution to animate the elements with delay:
$('.info-bar').find('li').addClass('hidden');
$('.info-bar').viewportChecker({
classToAdd: 'in-viewport',
offset: 100,
callbackFunction: function(elem) {
var elements = elem.find('li'),
i = 0;
interval = setInterval(function(){
elements.eq(i++).addClass('visible animated pulse');
if(i==elements.length) {
clearInterval(interval);
}
},250);
}
});
<ul class="info-bar">
<li>some content</li>
<li>some content</li>
<li>some content</li>
<li>some content</li>
<li>some content</li>
</ul>
Solution 3
You can accomplish this (Animate.css + Viewport Checker delay) by tweaking a bit the ViewportChecker script. I've done it with version 1.7.4. There are 3 modifications:
1) Add a "delay" option with default value 0:
$.fn.viewportChecker = function(useroptions){
// Define options and extend with user
var options = {
classToAdd: 'visible',
classToRemove : 'invisible',
offset: 100,
repeat: false,
invertBottomOffset: true,
callbackFunction: function(elem, action){},
scrollHorizontal: false,
delay: 0 // HERE
};
...
2) Add "data-delay" functionality so the delay can be specified in the html tag:
// Loop through all given dom elements
$elem.each(function(){
var $obj = $(this),
objOptions = {},
attrOptions = {};
// Get any individual attribution data
if ($obj.data('vp-add-class'))
attrOptions.classToAdd = $obj.data('vp-add-class');
if ($obj.data('vp-remove-class'))
attrOptions.classToRemove = $obj.data('vp-remove-class');
if ($obj.data('vp-offset'))
attrOptions.offset = $obj.data('vp-offset');
if ($obj.data('vp-repeat'))
attrOptions.repeat = $obj.data('vp-repeat');
if ($obj.data('vp-scrollHorizontal'))
attrOptions.scrollHorizontal = $obj.data('vp-scrollHorizontal');
if ($obj.data('vp-invertBottomOffset'))
attrOptions.scrollHorizontal = $obj.data('vp-invertBottomOffset');
if ($obj.data('vp-delay')) // HERE
attrOptions.delay = $obj.data('vp-delay');
...
3) Wrap the statements to be executed when the element is in the viewport, with a setTimeout call:
// Add class if in viewport
if ((elemStart < viewportEnd) && (elemEnd > viewportStart)){
setTimeout(function() { // HERE
// remove class
$obj.removeClass(objOptions.classToRemove);
$obj.addClass(objOptions.classToAdd);
// Do the callback function. Callback wil send the jQuery object as parameter
objOptions.callbackFunction($obj, "add");
}, objOptions.delay);
...
Usage
HTML
<div data-vp-animate="bounceInLeft" data-vp-delay="500">
...
</div>
CSS
.hidden-o {
opacity: 0;
}
.visible-o {
opacity: 1;
}
JS
$('[data-vp-animate]').each(function() {
var classToAdd = 'visible-o animated '+($(this).data('vp-animate') ? $(this).data('vp-animate') : 'fadeIn');
$(this).addClass('hidden-o').viewportChecker({
classToAdd: classToAdd
});
});
user13286
Updated on June 14, 2022Comments
-
user13286 almost 2 years
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!!
-
user13286 almost 10 yearsWow. This answer goes way above and beyond. Thank you so much, this is precisely what I was looking for!!!