Best way to start tweens/timeline after page loads?

[Mr Pablo]

What is the best way to initialise my tweens/timelines?

 

Is there a way to make sure the page is 100% loaded before starting the tween/timeline?

[Rodrigo]

Hi,

 

Well depends on what your loading into your page. The most reliable method I know is use the window.onload event handler; this one is triggered once everything in the DOM is loaded, ie, scripts, text, images, etc.. You can create all your tweens and timelines and start them with window.onload. In this case my recommendation will be to nest as much as you can, ie, put as many tweens and timelines inside one parent timeline or in as few as possible to get a better and simpler control of your animations. It'll be like this:

var masterTimeline = new TimelineMax({paused:true}),
    tl1 = new TimelineMax(),
    tl2 = new TimelineMax(),
    tl3 = new TimelineMax();

//Populate your timelines
tl1
    .to()
/*...*/
    .to();

tl2
    .to()
/*...*/
    .to();

tl3
    .to()
/*...*/
    .to();

masterTimeline.add([tl1, tl2, tl3]);

window.onload = function()
{
    masterTimeline.play();
}

Also you could concatenate or adjust the sequence in which your tweens/timelines play with callbacks, check Carl's video tutorial on sequencing:

http://www.greensock.com/sequence-video/

 

If you're dealing with images and you want to load all the images window.onload also could be the solution but if you're looking for something more fancy take a look at David DeSandro's images loaded. Is a very nifty way to preload your images and it has it's own callbacks which is very useful for this cases:

http://desandro.github.io/imagesloaded/

 

Hope this helps,

Cheers,

Rodrigo.

[Mr Pablo]

Thanks for the ideas!

 

This has actually helped with another aspect of my project.

 

I was using just one timeline, but I now have 1 timeline per animation and then use a master timeline to play them in sequence

[Praney Behl]

@rhernando Great explanation mate! Saved me asking the same question.

 

Thanks