TimelineLite 'onComplete' to continue

[shoey]

Hello,

 

I'm wondering if its possible to continue a timeline if a specific tween is completed when using appendMultiple, rather than waiting for the longest tween to complete.

 

I don't want to use onComplete with a function because the function won't be part of the timeline when I play the timeline in reverse.

 

I would greatly appreciate help getting the following example to only move on to step 2 when mc1.x = 100 rather than when mc2.x = 100, without needing to use the offset parameter if possible, because the combination of so many offsets and differently timed tweens is becoming too difficult to follow in my code.

 

//step 1

timeline.appendMultiple( [ TweenLite.to(mc1, 0.5, { x: 100 } ),
                                    TweenLite.to(mc2, 1, { x: 100 } ) ] );

 

//step 2

timeline.appendMultiple( [ TweenLite.to(mc1, 1, { x: 200 } ),
                                    TweenLite.to(mc2, 1, { x: 200 } ) ] );

 

Thanks,

Matt

[shoey]

Related to my first question (and possibly the same solution?), I'm also wondering if it's possible to ignore a step in the timeline, so the timeline can continue without waiting for a specific step or tween to complete, and again without the use of so many offset parameters.

 

In the following example, I want mc1 & mc2 to start a position tween at the same time and end at different times. So when mc1=100, I want an alpha tween to begin immediately, and likewise when mc2=100. To make this happen, I added an offset parameter to step 2, however this will affect when step 3 starts. I want step 3 to completely ignore the timing from step 2 so that step 3 will start when step 1 is complete. I don't want to use an offset on step 3, otherwise this begins a long chain of offset parameters that becomes more and more difficult to follow as the steps move on.

 

Hope that makes sense, and thank you in advance for any help with this!

 

//step 1

timeline.appendMultiple( [ TweenLite.to(mc1, 0.5, { x: 100 } ),
                                    TweenLite.to(mc2, 1.5, { x: 100 } ) ] );

 

//step 2

timeline.append(TweenLite.to(mc1, 2, { alpha: 0.5} ), -1);

 

//step 3

timeline.append(TweenLite.to(mc2, 1, { alpha: 0.5} ));

[GreenSock]

First of all, if you put an onComplete on an individual tween in a timeline, it'll only get called when moving forward, not backward. But I don't think that's a good solution here anyway (I just wanted you to know). 

 

I would STRONGLY recommend reading/watching this: http://greensock.com/position-parameter

 

What you're asking would actually create a conflict because you'd have mc2.x animating to 100 and at the same time, you'd have another tween animating it to 200 (they'd overlap by 0.5 seconds). See what I mean? That's faulty animation code. 

 

If I understand your goals here properly, you might LOVE working with nested timelines. This is how I built out the animation on our home page very easily. Example:

var master:TimelineLite = new TimelineLite();
master.add( step1() )
    .add(step2(), "-=0.5"); //note: I don't recommend this offset/overlap because your code will create conflicting mc2.x tweens.

function step1():TimelineLite {
    var tl:TimelineLite = new TimelineLite();
    tl.to(mc1, 0.5, {x:100})
      .to(mc2, 1, {x:100}, 0);
    return tl;
}

function step2():TimelineLite {
    var tl:TimelineLite = new TimelineLite();
    tl.to([mc1, mc2], 1, {x:200});
    return tl;
}

That way, it's very easy to find each step, edit it in a modular way, and everything flows into the master timeline seamlessly. This technique can totally change your animation workflow for the better. 

[shoey]

Oops, I didn't notice my first example had that conflict. The animations in step 2 were not important, only the timing on when step 2 begins was the point of that example.

 

I'll look into the link you sent me as well as give the nested timeline approach a try.

 

Thank you so much,

Matt

[shoey]

I watched the video from link, and I quite enjoyed the comment towards the end of the video regarding the impossibility of animating with the need to rely on one tween triggering the next tween as that was exactly what I thought I had to do and was struggling with. Using absolute values for position paramaters made my life much easier. Thank you.

[GreenSock]

Yep, once you get the hang of the methods and parameters, it makes your life so much easier. You just gained a bunch of power at your fingertips