javascripthtmlanimationpreloaderanimate.css

Animations trigger before page loads

I created a website that uses animate.css to animate elements. But the problem is that the animations trigger before the page loads. I avoid using the delay property provided by animate.css as the page may take different loading times to load on different devices. Please suggest something.

Also, I'm using a pre-loader for the website if that helps.

Solution

  • You can show full screen gif animation (loader) untill site loading. And using js:

    window.addEventListener('load', function () {
    document.getElementById('loader').hidden = true;
});