imagesLoaded + GSAP

[lkhcashsavas]

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:

$('#content').imagesLoaded()
  .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 May 24, 2016 by morf

[OSUblake]

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.

http://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/?p=59586

 

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

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