TimelineMax syntax for stagger start times [SOLVED]

[peterPotter]

I simply want to scale and rotate a clip, but the trick is that I want the rotation to occur sometime halfway through the scale. Note that the tweens are on the same clip. See my comments in the code.

myContentTweens = new Array ();
myContentTweens.length = 0;

myContentTweens.push ( TweenLite.to(mainClip, 1, {scaleX:0.75, scaleY:0.75, ease:Expo.easeOut, onComplete:addStageEventListener}) );
// When the scale above reaches about 0.8, I want to do the rotation below. I don't want to wait until the end (stop and start) of the 0.75 scale to proceed with the rotation.
myContentTweens.push ( TweenLite.to(mainClip, 2.3, {rotationY:mainClip.rotationY + 180, ease:Expo.easeOut }) );
// Exactly the same situation here, about halfway through the rotation, I want to start scaling up to 1.
myContentTweens.push ( TweenLite.to(mainClip, 0.3, {scaleX:1, scaleY:1, ease:Expo.easeOut}) );

timelineFlip = new TimelineMax({tweens:myContentTweens, repeat:0, yoyo:false, repeatDelay:0, align:TweenAlign.SEQUENCE, onComplete:addHomeBackBtns}); 
// I tried the following, but of course all the prior tweens are overwritten by new tweens
//timelineFlip = new TimelineMax({tweens:myContentTweens, repeat:0, yoyo:false, repeatDelay:0, align:TweenAlign.START, stagger:0.34, onComplete:addHomeBackBtns});		

 

Thanks very much.

[GreenSock]

No problem. Should be simple. In fact, you have two options:

 

1) If you don't want to use TimelineMax (I know you do, but I'm just putting the info here in case others don't), use the delay special property to schedule the tweens:

 

TweenLite.to(mainClip, 1, {scaleX:0.75, scaleY:0.75, ease:Expo.easeOut, onComplete:addStageEventListener});
TweenLite.to(mainClip, 2.3, {delay:0.8, rotationY:mainClip.rotationY + 180, ease:Expo.easeOut });
TweenLite.to(mainClip, 0.3, {delay:1.95, scaleX:1, scaleY:1, ease:Expo.easeOut});

 

2) use the insert() method of TimelineMax to control EXACTLY where you want the tweens:

 

var myTimeline:TimelineMax = new TimelineMax();
myTimeline.insert( TweenLite.to(mainClip, 1, {scaleX:0.75, scaleY:0.75, ease:Expo.easeOut, onComplete:addStageEventListener}), 0);
myTimeline.insert( TweenLite.to(mainClip, 2.3, {rotationY:mainClip.rotationY + 180, ease:Expo.easeOut }), 0.8);
myTimeline.insert( TweenLite.to(mainClip, 0.3, {scaleX:1, scaleY:1, ease:Expo.easeOut}), 1.95);

 

Don't feel like you need to always use the append() method or appendMultiple() with a stagger. You can place the tween(s) anywhere you want on the timeline using insert() or insertMultiple(). Have as much overlap or gap between them as you want. There are virtually no restrictions.

 

Have fun.

[peterPotter]

greensock,

 

I just realized I did a horrible job explaining my problem. I actually have the animation working fine in a sequence. What I want to accomplish is:

 

While the first tween is animating the scale from 100% to 75%, when that scale reaches about 80%, I want to do the rotationY, but do not overwrite the scale tween or stop the scale tween. Continue with both scale and the rotationY together.

 

It is analogous to inserting a manual keyframe about halfway through the scaling tween (if doing tweening on the timeline the old fashion way), and rotating the movieClip. The rest of the scaling will continue, but the rotaionY rotation will also affect the clip, both tweens at the same time.

 

 

The bottom line is that I don't want to do the scale, wait for the entire scale to complete, then do the rotation. I want to add the rotation about halfway through the scale, and have both the rotation and the rest of scale continue.

[GreenSock]

Yep, I understood that's what you wanted. Did my answer not suffice?

 

Let's say you want to tween the scale for 2 seconds, but the rotation for only 1 second, and that rotation tween wouldn't even start until the scale tween is halfway done. No problem:

 

myTimeline.insert( TweenLite.to(mc, 2, {scaleX:1.5, scaleY:1.5}), 0);
myTimeline.insert( TweenLite.to(mc, 1, {rotation:180}), 1); //notice I'm inserting it at exactly 1 second on the timeline!

 

Or you can just use delays. Either way should work just great.

 

If it's not working for you, please post the exact code that isn't working and explain what's not working about it.

 

Cheers!

[peterPotter]

greensoc,

 

Thanks very much. My apologies, I actually just looked at the code yesterday and thought it wasn't the solution I was looking for, but I just noticed I missed the last parameter in the insert function. The solutions you posted were indeed what I was trying to do. Thank you very much.

 

Problem solved. Now I am getting the hang of the timeline classes. I used the myTimeline.insert option because it seems more elegant.

 

Have a great day.