Trying to use TimelineMax as cue for sequential tweens

[sideDoor]

Hello,

 

Club member here, I am trying to use a TimelineMax as a queue for a series of animations/tweens. I want to be able to append a series of TweenCore objects (TweenMax or Lite OR TimelineMax or Lite) to a main timeline at once. On the completion of each child of the main timeline, I need to pause the main timeline, do some stuff, then call resume on the main timeline to continue firing the cued TweenCores. How can I automatically pause or call a method on completion of the main timeline's child?

 

It appears the onComplete functions of a nested Tween or Timeline are called too late, and therefore I cannot pause the main timeline from an event or method of the nested TweenCore...the next child of the main timeline begins to play BEFORE the nested TweenCore's onComplete method is fired.

 

Thanks!

sd

[GreenSock]

Hmmm...any chance you could provide some sample code that demonstrates the issue (or better yet, an FLA)? I tried this code:

 

var t:TimelineMax = new TimelineMax();
t.append(new TweenLite(mc1, 1, {y:0, onComplete:test}) );
t.append(new TweenLite(mc2, 0.01, {y:0}) );
function test():void {
t.pause();
}

 

And it worked fine - the TimelineMax paused at exactly the moment that the mc1 tween fired its onComplete. Am I missing something?

 

Also, please make sure you have the latest version of all the classes. http://www.TweenMax.com

[sideDoor]

Hmm, I can't really send an fla, the project is quite a bit more complex than that...

 

Moreover, I'm using objects here, and I wonder if your test works because you're using a local callback function and TweenLite instead of appending Timelines, etc.

 

So I'm doing this:

 

1. in an abstract view class, I have two methods that create default animateIn and animateOut methods, these return TimelineMax objects contain the needed sequence of TweenCore objects to animate the view onto and off of the stage.

 

Typically, the method looks like this:

 

// earlier in the View class, we define a constant to denote the event type:
public static const ANIMATION_IN_COMPLETE:String = 'animationInComplete';

// later we have our animateIn() method:
public function animateIn():TimelineMax
{
var timeline:TimelineMax = new TimelineMax({onComplete:dispatchEvent, onCompleteParams:[new Event(View.ANIMATION_IN_COMPLETE)]});

timeline.append(TweenMax.to(this, .4, {alpha:1}));

return timeline;
}

 

2. when the View is asked to show itself on the stage, FROM WITHIN ANOTHER OBJECT, I'm trying to do this:

 

view.addEventListener(View.ANIMATION_IN_COMPLETE, onAnimateInComplete);

_mainTimeline.append(view.animateIn());
_mainTimeline.append(view.animateOut());
_mainTimeline.play();

 

And we try to catch the View.ANIMATION_IN_COMPLETE event like so:

 

private function onAnimateInComplete(e:Event):void
{
var view:View = e.target as View;
_mainTimeline.pause();

// here I can do some stuff I need to DO, and later call mainTimeline.resume(); to fire the view.animateOut() timeline, which was appended above: BUT NO LUCK - BOTH appends have been fired!
}

 

The only way so far around this seemingly issue of timing, is to NOT append all timelines at once, and append them when needed, like in the onAnimateInComplete method, but I don't want to do this, and kind of nullifies the point of using a main timeline...any suggestions? THANKS!

[sideDoor]

It's too bad we can't do something like:

 

_mainTimeline.append(view.animateIn(), onAppendComplete:function(){_mainTimeline.pause()});

 

Or whatever...

[GreenSock]

I'm a little confused - could you explain what you meant by "BUT NO LUCK - BOTH appends have been fired!"? Did you expect the append() not to work the first time around?

 

Are you saying that when your animateIn() completes, it calls the method properly and pauses the timeline properly but it mistakenly runs your entire animateOut() sequence before the pause is effective? Sorry if I'm not getting something obvious, but I've used TimelineLite/Max in ways very similar to what you're describing and they worked perfectly. Is there any way you could whip together a very basic example with absolutely minimal code to illustrate the problem? I know you posted code that was attempting to demonstrate things, but it was not at all clear to me what the problem was - like what you were expecting that didn't happen or visa versa. The "both appends have been fired" has me stumped as to what it means. An example FLA that I can publish and clearly see something broken would be SUPER helpful. I'm sure we can get it figured out once I understand the issue.

[sideDoor]

Ok, I'll put together a demo when I get a chance: I think this might be helpful not only for me...

 

But in an attempt to clarify, what I think is happening is that when the animateIn() sub-timeline completes, the animateOut() is being run by the main-timeline BEFORE the completion of the series of logic that includes the call to main-timeline.pause(), which is housed in the animateIn-onComplete method.

 

I'll try to put together a streamlined version, but I'm swamped at work right now, so when I get the time, I'll do so...

 

Regardless, what I'm trying to do is probably better served by the command-pattern...

 

Thanks for your time!