Javascript or JQuery to load GSAP

Question

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. I have a few questions about these. First of all here is the code:

   <script>
    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}) );
    }
 </script>

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. 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. I'll also post this on the greensock forums but have good luck here on on Stack Exchange.

Answer 1

I don't think there's more "optimized" way to load tweens.

About window.load - you can't say that is not the best way. It depends when do you want to fire the script. document.ready fires up when all DOM structure is loaded. window.load is fired when everything on page is loaded - images, external content in iframes, etc. Please refer to What is the difference between $(window).load and $(document).ready?

Loading scripts fromCDN is IMO quite good solution. If you want to load "seleced things" you'd need to get not-minified js file, and strip out code you don't need, but I'd strongly advise agains it - you can do more harm than good and ended up with broken files.