In order to use Waypoints.js I have createdthe following js file called animations.js for the animations to execute:
$(function () {
"use strict";
var fadeInUpContent = function() {
var i = 0;
$('.fadeup-box').waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
i++;
$(this.element).addClass('item-animate');
setTimeout(function(){
$('body .fadeup-box.item-animate').each(function(k){
var el = $(this);
setTimeout( function () {
el.addClass('fadeInUp animated');
el.removeClass('item-animate');
}, k * 500, 'easeInOutSine' );
});
}, 500);
}
} , { offset: '85%' } );
};
var slideInRightContent = function() {
var i = 0;
$('.slide-right-box').waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('animated') ) {
i++;
$(this.element).addClass('item-animate');
setTimeout(function(){
$('body .slide-right-box.item-animate').each(function(k){
var el = $(this);
setTimeout( function () {
el.addClass('slideInRight animated');
el.removeClass('item-animate');
}, k * 500, 'easeInOutSine' );
});
}, 500);
}
} , { offset: '85%' } );
};
fadeInUpContent();
slideInRightContent();
});This is working, only because it are separate functions, the staggerd animation (one after the other) only works if all objects have the same class (fadeup-box or slide-right-box) So with a photo gallery where all images have the same class (fadeup-box) it is working great. Only on certain sections in the website I need a combination of the two first fadeup-box and than slide-right-box. But since it are separate functions they execute at the same time. Is there a way to combine thes two (and in the future maybe even more) so that one will execute with the Timeout delay?
Thank you in advance