Jump to content
Search Community

Start timeline after preloading all assets

hallibus test
Moderator Tag

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

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

  • 5 years later...

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!

  • Like 1
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.
×
×
  • Create New...