Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
shoey

TimelineLite 'onComplete' to continue

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 :)

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.
×