pause onComplete

[vzj]

Hello,

 

I have TimelineMax with multiple instance of TweenMax on it. One of the instances has onComplete that calls itself. I need that to simulate random movements. When I pause TimelineMax everything gets paused except the TweenMax that has onComplete. I kind of get why it is happening but is there way to pause onComplete call?

 

Thanks

[Carl]

Hi and Welcome to the GreenSock Forums.

 

Can you please elaborate on what you mean by:

 

One of the instances has onComplete that calls itself.

 

is the onComplete telling a TweenMax that is in the timeline to restart?

 

is there way to pause onComplete call?

 

Are you trying to pause a tween that has an onComplete? or prevent an onComplete from firing?

 

Not really understanding your questions.

 

If you want to pause all tweens regardless of whether or not they are in a timeline I would suggest you use the exportRoot() method available in v12 (recommended)

 

http://api.greensock.com/as/com/greensock/TimelineLite.html#exportRoot()

 

var tl = TimelineLite.exportRoot();
tl.pause();

 

 

if you are still using v11 perhaps TweenMax's pauseAll() will suffice

 

http://www.greensock.com/as/docs/tween/com/greensock/TweenMax.html#pauseAll()

 

TweenMax.pauseAll();

 

 

if you need more clarification, just let us know. It would be helpful to see a little bit of your code to understand better what you need to do.

[vzj]

Hi Carl,

 

Thank you for the response. Here is a sample code to illustrate the problem:

 

public function randomPosition(target:DisplayObject, time:Number, xOffset:Number = 100, yOffset:Number = 100):TweenMax{
 return new TweenMax(target, time, {x:Math.random()*xOffset, y:Math.random()*yOffset, ease:Quad.easeInOut, onComplete:randomPosition, onCompleteParams:[target, time, xOffset, yOffset]});
}

public function rotate(target:DisplayObject, time:Number, repeat:Number, degree:Number):TweenMax{
 return new TweenMax(target, time, {repeat:repeat, rotation: degree, ease:Cubic.easeInOut} );
}

var timeLine:TimelineMax = new TimelineMax();
timeLine.append(randomPosition(target, 2));
timeLine.append(rotate(target, 2, -1, 360));
timeLine.pause();

var paused:Boolean = true;

 

The randomPostion function is a trimmed down sample the real function is more involved. When I pause timeLine only "rotate" tween will be paused. It seems like because "randomPosition" has recursive nature by using onComplete where as "rotate" uses continues repeat (repeat = -1).

 

I found only ugly way to solve it for now. Have a dependency on the timeLine in my randomPosition function by referencing "paused" variable that I created and returning a dummy Tween that still runs recursively but doesn't do any visual changes.

 

public function randomPosition(target:DisplayObject, time:Number, xOffset:Number = 100, yOffset:Number = 100):TweenMax{
 if (paused) {
  return new TweenMax(target, time, {onComplete:randomPosition, onCompleteParams:[target, time, xOffset, yOffset]});
 }
 return new TweenMax(target, time, {x:Math.random()*xOffset, y:Math.random()*yOffset, ease:Quad.easeInOut, onComplete:randomPosition, onCompleteParams:[target, time, xOffset, yOffset]});
}

 

In this way it is not really paused but for the end users it will seem that way. Hope this will clarify the problem.

 

I'm reading about exportRoot in v12, based on the description my guess it will still be an issue as onComplete concept so to say "outside of the main loop" for timelines.

 

Thanks

[Carl]

The problem is that randomPosition() creates a tween that is not inside your timeline. Only the first time you do this:

 

timeLine.append(randomPosition(target, 2));

 

is a tween inserted into timeline. Whenever that first random tween completes, all subsequent random tweens have nothing to do with the timeline.

 

I think you should give exportRoot() a try.

 

Another alternative is to put all your randomPostion() tweens inside a timeline that is nested inside a a main timeline. This way when you pause the main timeline, the nested timeline will also be paused.

You can also reverse the main timeline and the nested timeline that is filled with random tweens will also reverse. Something like this:

 

 

import com.greensock.*;

var tl:TimelineLite = new TimelineLite();

var nested:TimelineLite = new TimelineLite({onComplete:newRandomTween});



newRandomTween();
tl.append(nested);
tl.append(TweenLite.to(mc2, 1, {rotation:360}));
tl.append(TweenLite.to(mc2, 1, {x:360}));
tl.append(TweenLite.to(mc2, 1, {y:360}));
tl.append(TweenLite.to(mc2, 1, {rotation:180}));
tl.append(TweenLite.to(mc2, 1, {x:0}));
tl.append(TweenLite.to(mc2, 1, {y:0}));


function newRandomTween():void{
nested.append(TweenLite.to(mc, 1, {x:Math.random() * 400}), Math.random()*2);
trace("nested number of tweens = " + nested.getChildren().length);
}

play_btn.addEventListener(MouseEvent.CLICK, playHandler);

function playHandler(e:MouseEvent):void {
tl.play();
}


pause_btn.addEventListener(MouseEvent.CLICK, pauseHandler);

function pauseHandler(e:MouseEvent):void {
tl.pause();
}

reverse_btn.addEventListener(MouseEvent.CLICK, reverseHandler);

function reverseHandler(e:MouseEvent):void {
tl.reverse();
} 

 

attached is a cs5 fla that uses v12 of GSAP.

 

Note that the nested timeline uses: onComplete:newRandomTween

 

That means that new randomTweens will only be created when the nested timeline "has run out of tweens". If you use the onComplete of every randomly generated tween to create another random tween then that method will be called every time every tween inside the nested timeline completes EVERY time the main timeline is played. Suppose you tell the main timeline to play again, that means every time one of those tweens inside nested completes, a new random tween will be created even though there may already be a few hundred tweens inside nested. By adding the "onComplete:newRandomTween" to the nested timeline, its just more efficient as it ensures new random tweens are only created after all the previously created random tweens have finished playing.

 

keep in mind, if you let the main tl play for a long time, you will be generating many many tweens inside nested which will affect the duration of the main timeline too.

 

I don't know if you intend to ever replay the main timeline from the beginning or reverse it, so I don't know what the best solution is for your situation.

 

You probably could just name your random tween and tell it to pause whenever you pause the main timeline.

appendRandomTweens.zip

[vzj]

Thanks Carl, you gave me not one but many solutions. Much appreciated!