Jump to content

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

Start timeline after preloading all assets

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 3
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.