Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
hallibus

Start timeline after preloading all assets

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 :)

Link to comment
Share on other sites

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! :)

  • Like 4
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×