Jump to content
Search Community

Greensock preloader

phillip_vale test
Moderator Tag

Go to solution Solved by Carl,

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



I am trying to build a preloader based on a new logo for a client.


I tried some tutorials and even reworking existing code but can't quite grasp it.


I essentially would like this animation to repeat until the content behind it is loaded and then on completion the logo jumps and fades.


Genuinely trying to learn so don't mind any pointers.


I'm not sure what i am checking the loading elements against and what should occur when those elements have loaded.


Thanks for any help,



See the Pen PzqZxX by phillip_vale (@phillip_vale) on CodePen

Link to comment
Share on other sites

  • Solution

Sorry, but do to all the questions we get here we really have to focus our support on questions related to GSAP. 

I think you could just do a google search for "javascript preload images" and find dozens of techniques.


Any preload technique is going to have some sort of onLoad or loadComplete type callback that will allow you to call a custom function of your own.

In that function you would probably just pause() your looping timeline and create a new timeline for the jump.


This thread on our forum has a few different approaches but it seems like you may need to add new image paths.




also CodePen is a good place to look too:


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