TimelineMax: Duration settings

[vsiege]

I'm having an issue with sequencing some animations. I would ultimately like the duration of the timeline to be equal to 2 seconds but only have the following objects animate at specific points in the first second.

 

Goals:

1. Duration of TimelineMax = 2 seconds

2. Specifically time the elements to start and finish there animations within the first second.

3. Loop timeline

 

 

So far I have the loop working and all animation running. the problem is that the duration is not 2 seconds long. I could really use some help straightening this out. Thank you in advance.

 

	    tl1.insertMultiple(
			    [
				    TweenLite.fromTo(  byId("bac0"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:0,rotation:-360, top:159, left:649}}  ),
				    TweenLite.fromTo(  byId("pill0"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:1,rotation:-360, top:159, left:649}}  ),
				    TweenLite.fromTo(  byId("bac2"),.2, {css:{autoAlpha:1,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:0,rotation:360, top:410, left:500}}  ),
				    TweenLite.fromTo(  byId("pill2"),.2, {css:{autoAlpha:0,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:1,rotation:360, top:410, left:500}}  ),
				    TweenLite.fromTo(  byId("bac4"),.2, {css:{autoAlpha:1,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:0,rotation:-720, top:600, left:300}}  ),
				    TweenLite.fromTo(  byId("pill4"),.2, {css:{autoAlpha:0,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:1,rotation:-720, top:600, left:300}}  ),
				    TweenLite.fromTo(  byId("bac6"),.2, {css:{autoAlpha:1,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:0,rotation:330, top:222, left:100}}  ),
				    TweenLite.fromTo(  byId("pill6"),.2, {css:{autoAlpha:0,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:1,rotation:330, top:222, left:100}}  ),
				    TweenLite.fromTo(  byId("bac8"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:0,rotation:360, top:90, left:240}}  ),
				    TweenLite.fromTo(  byId("pill8"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:1,rotation:360, top:90, left:240}}  ),
				    TweenLite.fromTo(  byId("bac10"),.2, {css:{autoAlpha:1,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:0,rotation:-225, top:270, left:440}}  ),
				    TweenLite.fromTo(  byId("pill10"),.2, {css:{autoAlpha:0,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:1,rotation:-225, top:270, left:440}}  )
					 ],0, "normal",.1
	    );

[GreenSock]

I'll offer a few things:

• You put your "delay" in the wrong place. It belongs in the "to" vars object, and NOT inside the css object. For example:
  

//BAD:
TweenLite.fromTo(element, 0.2, {css:{scale:0.5, delay:0.2}}, {css:{scale:1}});
//GOOD:
TweenLite.fromTo(element, 0.2, {css:{scale:0.5}}, {css:{scale:1}, delay:0.2});

• It looks like alll your tweens are 0.2 seconds long, and you have a stagger of 0.1. Since there are 12 tweens, that means the last one will get inserted at 1.1 seconds. Therefore, your timeline will be 1.3 seconds long (if we assume no delays). If we include the delay, it'd be 1.5 seconds. So you can simply adjust your timing accordingly or you can even set the duration on the timeline and it will automatically adjust the timeScale to match that duration. So, if you do tl1.duration(2) after you inserted all your tweens, and the duration is normally 1.5 but you're setting it to 2, that means timeScale will get adjusted on that timeline to be 0.75.
  

Does that help?