Delaying the css animations with a preloader?

Question

I currently have a website which uses Animate.css on the frontpage ( https://daneden.github.io/animate.css/ ). How it currently works is that the animation kicks in as soon as the user opens the website, but this causes the animation to "lag". What I would like is to let it wait until the full page loads in before the css animations start to do their thing, thus making the experience much more fluid.

I've looked into several js based preloaders, tried some but it doesn't delay the css animations. As soon as the page is finished loading, the css animations have already been completed. Am I doing something wrong, or are JS preloaders not the right approach?

Answer 1

You would have to use javascript and/or jquery to dynamically add the css class that has the animation to the desired element after the page has been loaded. We can do this with the $document.ready event in jquery.

$(document).ready(function(){
     $('css selector').addClass('class-that-has-animation-binding').
});

That is how he is doing it on the main site if you view is source code.

Answer 2

The above approach didn't work for me.

Since a good preloader will wait until ALL page elements, including images, have been displayed, I would wait until then ....

$(window).load(function() {
  $('css selector').addClass('class-that-has-animation-binding').
});