Jump to content


Best way to load GSAP and best way to optimize animation

Moderator Tag

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'm making the switch from Flash to GSAP HTML5 animation and want to really make sure I'm doing this the best way. Right within my html doc I have a series of animation that utilize TimelineMax so that I may loop the entire set of animations. I have a few questions about these. First of all here is the code:

window.onload = function(){
var tl = new TimelineMax({repeat:2, repeatDelay:3});
tl.add( TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn}) );
tl.add( TweenLite.to(my_films, 1, {width:177, height:44, alpha:1, ease:Power1.easeIn}) );
tl.add( TweenLite.from(season2, 1.5, {alpha:0}) );
tl.add( TweenLite.to(grantland, .5, {x:19, alpha:1}) );
tl.add( TweenLite.to(packshot, 2, {alpha:1, ease:Power4.easeIn}) );
tl.add( TweenLite.to(holiday, 1, {alpha:1}) );
tl.add( TweenLite.to(starts, .75, {alpha:1}) );
tl.add( TweenLite.to(buy, .5, {alpha:1, top:142, ease:Back.easeOut}) );

Is there a more optimized way to load these? I know that

window.onload = function(){

isn't the best way - I heard that document.ready could be a good way but having a hard time getting that work. Further more I can probably scrap the TweenLite reference all together and just use tl.to, is that correct?

Also right now I'm pulling in the entire TweenMax library in this manner:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script

Is there a way to only load the select things that I need and therefore save on file size? Please advise.

Apologies for the noob questions! Thanks in advance for any help! 

Link to comment
Share on other sites

Glad to see you made it into the forums.


Although you may save a touch of files size loading a few individual scripts, most folks say that its quicker to load 1 larger script than 3 smaller ones as the latency involved with multiple server requests is usually a bigger concern than available bandwidth.


If you don't want to load TweenMax.min and you want to use TimelineMax you will then have to load:


TweenLite, TimelineMax (includes TimelineLite) and CSSPlugin.


here is an example: http://codepen.io/GreenSock/pen/bcd0c67d6d8465e4691364bceec907f8 (click on the gear next to the JS panel to see the files that are loaded).




Yes, using tl.to() will work the same as tl.add() with less code.




window.onload and document.ready() don't handle loading any files, they are just ways to run code after the browser is ready. If you are using jQuery, document.ready() should work fine. If you still have trouble, please provide an example.

Link to comment
Share on other sites

Also, if you ever need to see which files you should load. 


Just click the getGSAP button on any page of our site, click on the JavaScript tab, and then click customize. It shows you the size of each script and the dependencies. 


For instance if you select TimelineMax it will show you that TweenLite is necessary.

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.