Right now you're doing most of your animations in jQuery but you don't have to. You can do those animations in animate.css.
I'm working on this same problem right now so this isn't a solution per se but it is a good direction. I created a timeline of events that I wanted to have happen, and then I trigger those whenever I like.
First create the elements with the classes you'd like to add in javascript:
var animations = [
{
time:0,
classes:"bounceInLeft"
selector:"table"
},
{
time:500,
classes:"bounceInLeft"
selector:"table"
},
{
time:400,
classes:"bounceInLeft"
selector:"table"
},
]
Now inside of our $(document).ready we'll add some code to go through the list of events and create a timeline
var timeline = 0;
for(var i=0; i<animations.length; i++){
timeline = parseInt(animations[i].time, 10) + parseInt(timeline, 10);
runAnimation(i, timeline);
}
Finally we need the function "runAnimation" to go through and create all the timeouts using the timeline.
function runAnimation(i, timeline){
setTimeout(function(){
console.log(i);
$(animations[i].selector).addClass(animations[i].step);
}, timeline);
}
Now you can just add all the animations you want in the object array and our two other snippets will handle the rest.
Have fun!