Jump to content


imagesLoaded + GSAP

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

Hi all, quick question. I'm trying to build my first preloader, but when it finishes I want it to stay on screen, so I can interact with it later on, when the page is loader. 


I took the polylion example and edited it with a new svg. I would like the preloader to start normally and finish when 100% of images are loaded. I have a working animation on my codepen but I don't know where to add the imagesLoaded code which would be something like this:

  .always( function( instance ) {
  .done( function( instance ) {
  .fail( function() {
  .progress( function( instance, image ) {

How shall I proceed?

See the Pen YqmgbO by krismorf (@krismorf) on CodePen

Edited by morf
Link to comment
Share on other sites

Not sure what you're really asking. It looks like you are trying to use a jQuery deferred object. Check out this thread for ways to load SVGs.



For preloading images, here's an example of using an image store.

See the Pen 630a134bb7cb888515ee68ce551fb1fc?editors=0011 by osublake (@osublake) on CodePen

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