Start timeline after preloading all assets

[hallibus]

Hey guys,

 

I'm new to GSAP and was wondering if there's an easy solution to start the timeline AFTER all assets/images have been loaded. Maybe even with a circular preloader e.g.

 

Thanks for your help

[Jonathan]

Hello hallibus, and welcome to the GreenSock Forum!

 

You could do this so your GSAP code only runs when the DOM is ready and the window has loaded:
 

// run preloader code here
...

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {

       // wait until window is loaded - meaning all images, stylesheets, js, fonts, media assets, and links
       window.addEventListener("load", function(e) {

              // run all GSAP code here

       }, false);
});

Happy Tweening!

[ryanf]

Here is an example of a circular preloader that loads images from an array.  

 

Populate the array with lots of very large images to get a better idea of how it looks in action.  

 

See the Pen NjPqxW by rfenik (@rfenik) on CodePen.

[Adrianraiden007]

How can we run the progress bar as the assets are being loaded?

 

and the progress to reach 100 and fade away only when all the assets on the page are finished loading?

 

[Rodrigo]

Hi @Adrianraiden007 and welcome to the GreenSock forums!

 

You can set up a GSAP instance to tween the progress of the bar animation and when all the elements are loaded just fade-out the bar and progress text.

 

This is an old example but it should help you get started:

See the Pen AWXJvK by rhernando (@rhernando) on CodePen.

 

If you keep having issues, please provide a minimal demo so we can have a look at the problem.

 

Happy Tweening!