Jump to content
GreenSock

Myows

Start animation once all images are loaded

Recommended Posts

Hi

 

Sorry if this more a general js question, but your answer would be appreciated

 

I'm working on an animation and loving the gs TweenMax capacities

(work in progress here: http://max-guedy.com/animation-cofely/complet.html ) and I would like it to start only once all images have loaded, akin to adding a Flash preloader.

 

Could anyone please point me in the right direction?

 

Thanks in advance

Link to comment
Share on other sites

Use the load event instead of `ready` to initialize your code.

 

$(window).on('load', function(){
 // code here
});

  • Like 1
Link to comment
Share on other sites

Brilliant!

 

Thank you Dave (i've implemented on the link above)

 

Next question is what would the cleanest way be to hide the elements that are appearing... - would a display:none be my solution, the start the timeline with a display:visible ?

Link to comment
Share on other sites

in your stylesheet add

 

#container {
 visibility: hidden;
}

 

In your script

 

$(window).on('load', function(){
 $('#container').css('visibility', 'visible');
 // code here
});

Link to comment
Share on other sites

Hey Thanks Dave

 

I took a slightly different approach thanks to your 1st reply - visible on link above - gives it a preloader effect that fades out when the page is ready

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