Jump to content
Search Community

TimelineMax addPause

AlDev test
Moderator Tag

Recommended Posts

Hi Guys!


I hope this post finds you well.


I am writting because i am using timelinemax in order to create an animation that has 3 stops in between in which the user has the ability to either continue to the next point or go back.


All my tweens are working well, and now is time to add the pauses. I thought about just adding them to the onComplete and calling it a day. Yet when reversing they were not firing... This made me find out about onReverseComplete which worked like a charm expect that when going backwards the onComplete was firing as well pausing my animation before it could even get started. After a second click on the back button, the animation started playing backwards correctly.


Bceause of this effect, i decided to try adding a callback but to my surprise i ran into the same problem.


Then i went to the docs and found information about the addPause function. Including this piece of text:


"Remember, the virtual playhead moves to a new position on each tick (frame) of the core timing mechanism, so it is possible, for example for it to be at 0.99 and then the next render happens at 1.01, so if your callback was at exactly 1 second, the playhead would (in this example) move slightly past where you wanted to pause. Then, if you reverse(), it would run into that callback again and get paused almost immediately. However, if you use the addPause() method, it will calibrate things so that when the callback is hit, it'll move the playhead back to EXACTLY where it should be. Thus, if you reverse() it won't run into the same callback again."


This is what is happening to me currently and thought this was the right fix. The problem now is that when i add the pauses this way:

this.timeline.add( TweenMax.to(this.map.mapPoint,0.5,{frame:this.map.mapPoint.totalFrames, ease:Linear.easeNone}) );
this.timeline.add( TweenMax.from(this.map.line1,1,{scaleX:0, ease:Quint.easeInOut}));
this.timeline.add( TweenMax.to(this.map,1,{x:2286,y:-157, ease:Quint.easeInOut}) );
this.timeline.add( TweenMax.to(this.map,15,{x:-57,y:778, ease:SlowMo.ease.config(0.9,0.3)}) );

The animations pauses correctly, but if i try to use resume() or play(). The animation doesnt move at all. Only works at this point if i call reverse()


Any ideas what might be happening?


thanks a ton



Link to comment
Share on other sites

Hi Alex,


Thanks for reporting the issue.

This has been fixed in our soon-to-be-released version 12.1.4


I've attached a zip of updated TweenLite, TweenMax, TimelineLite files that you can drop into your current project's com/greensock folder


A temporary work-around would be

//force the playhead just an eensy weensy bit past the addPause()
timeline.play(timeline.time() + 0.00001) 

but that isn't necessary with the attached updated files




Sorry for the hassle. Keep your eyes peeled for the official release of 12.1.4






Link to comment
Share on other sites

This is great!


Thanks a ton for the quick response. I tried the classes and the issue is gone :-) now I can keep moving forward lol (no pun intended)


I have noticed a couple new things related to the addPause that I would like to point out, perhaps there is a better approach you can help me form:


1- If I add an addPause as the last item in the timeline, when i click the back button and call a reverse(), the timeline tries to play but stays stuck in the pause and calls it again. If i add a 0 time tween as the last item, the timeline works fine again.

this.timeline.add( TweenMax.to(this.map.mapPoint,0.5,{frame:this.map.mapPoint.totalFrames, ease:Linear.easeNone}) );
this.timeline.add( TweenMax.from(this.map.line1,1,{scaleX:0, ease:Quint.easeInOut}));
this.timeline.addPause(null, this._showStartNavigation);
this.timeline.add( TweenMax.to(this.map,1,{x:2286,y:-157, ease:Quint.easeInOut}) );
this.timeline.add ( TweenMax.to (this.map.gorillas, 1, {scaleX:1, scaleY:1}), "-=.5" );
this.timeline.addPause(null, this._onTimelinePaused); //it stays stuck here

2- On a next button I set the timescale to 1, and in a back button i set the timescale to 3 (so that the user can get back to the previous point faster), after calling reverse() in 1 out of 5 the timeline skips the next pause and continues to the one after next. I figure maybe adding labels might fix this issue, yet i found the same result.

private function _onNextBtnUp($event:MouseEvent):void{
private function _onBackBtnUp($event:MouseEvent):void{

Is there a better approach to pausing the timeline in a way it stops wether is reversed or not? Maybe a switch with timestamps that calls the pause function?


Any insight would be great :)


thanks again for the classes, it helped a ton





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.
  • Create New...