Jump to content


updateTo calls restarting timeline?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am tweening a few javascript objects.

I use onUpdate to move things on screen and they tween like butter.

Sometimes I call updateTo on the tweens and they update like the blue angels in fighting formation.


However, I need to check all of these objects' values after each has tweened to ensure they remain in some bounds.

I thought the way to do this was to put them into a timeline since the timeline's onUpdate is called last.

However, I've hit a snag -- when the tweens' updateTo are called, now that they are in a timeline, the tweens are restarted?


My workaround is to do my own bookkeeping and when the last of my objects has been tweened, then I will do my boundary checks.


Or is there a way to use a timeline in this unconventional way?  Thanks.

See the Pen jZByvJ by jedierikb (@jedierikb) on CodePen

Link to comment
Share on other sites

Sorry, but I have no idea what your demo is trying to show me.

I see 46 lines of code with totally obscure variable names: a, tId, $t.

Property names like a, divs with ids of t0 and t1.

Empty functions that are being called and passed parameters that aren't even expected


var tlineUpdate = function( ) {

var tline = new TimelineMax( {
    onUpdate: tlineUpdate,
    onUpdateParams: ['{self}', 'tline']
  } );


and the end result is 2 nearly identical red squares moving across the screen at different rates.


If you need further help please make rewrite your code in a way that someone who has never seen it before can read it and understand what it is supposed to do. Maybe make a #redBox and a #blueBox in a blueTween and redTimeline and tell us what each element is supposed to be doing and what they are doing that you don't expect. 



  • Thanks 1
Link to comment
Share on other sites

Sorry for the obtuse code.  

I've cleaned it up some and hope this is easier to grok.

You can change the behavior which adds the tweens to a timeline by toggling the variable addToTimeline to true.

See the Pen QQpmeP?editors=0010 by jedierikb (@jedierikb) on CodePen


Link to comment
Share on other sites

I might be misunderstanding something here, but isn't the problem simply that you set the 2nd parameter (resetDuration) to true instead of false on the updateTo() call? 

Link to comment
Share on other sites

If resetDuration is set to false there are no hiccups (yea!).  This works if the tweens are added or not added to a timeline.

In my example under those conditions, the two tweens take 10 seconds to complete and look great.


However, if the tweens are added to a timeline and then resetDuration is set to true, one tween apparently restarts when onUpdate is called. 


Compare this to when the tweens are not added to a timeline -- no hiccup/restart and the total time of the animation is ~15 seconds.  This is the visual behavior I was looking for.


What am I trying to accomplish?  My goals (which led to my original post):

- Get a callback when both tweens have been updated.  This is why I thought to put the tweens into a timeline.

- When one/both of the tweens has updateTo called on them, do _not_ set resetDuration to true, but instead to extend the duration of the tween.


A solution I came up with (which works for me!) was to not use a timeline and instead I keep track of every tweens' onUpdate.  Since I know how many tweens there are, I can count their onUpdate callbacks and when they've all fired I do my all-tweens-are-done logic then.  

Edited by erikb
Link to comment
Share on other sites

If you want to allow the TimelineLite/Max to mimic the "let tweens slide around to maintain alignment with the parent's playhead" behavior, you can set the timeline's smoothChildTiming:true flag. Is that what you're looking for?




Sorry if I'm missing your point. Glad you figured out a solution the works for you. 

Link to comment
Share on other sites

Alas, timeline.smoothChildTiming = true did not seem to do the trick.


FWIW, here are two demos next to each other showing the desired behavior of the two tweens and the not desired behavior I get when they are added to a timeline:



Here is a codepen with two tweens not added to a timeline.  At the 5 second mark, the red square has updateTo called on it and it accelerates to its new target.  This is desired visual behavior:

See the Pen qxjoWL by jedierikb (@jedierikb) on CodePen



And, here is a codepen with the tweens added to a timeline.  At the 5 second mark, the red square has updateTo called on it and it is moved back to its origin before accelerating to its new target (effectively restarting the tween):

See the Pen ddRdLr by jedierikb (@jedierikb) on CodePen


Link to comment
Share on other sites

I went through your very first and last pens, in both demos you are explicitly setting updateTo's resetDuration parameter to true which causes animation to restart. If you leave it as it is (default is false) then you won't see animation restarting.


If you are adding active tween into timeline then it does restart but none of your demos are adding active tween into timeline. And I am not sure if active tweens can be added to timeline without resetting ongoing animation.


See the Pen GQEVYd?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 2
Link to comment
Share on other sites

Yep, I believe @Sahil is correct. You're setting the resetDuration to true which is causing the issue in that demo. Once I changed that, it seemed to work (or did I miss something?)


You can add a tween to a timeline anytime. It can pick up the animation from wherever you want - it's just a matter of aligning the playhead with the desired location. Remember, you can set a tween's startTime() to whatever you want. So, for example:


newParentTimeline.add(tween, newParentTimeline.time() - tween.time());


There are several other options too, but I don't want to overwhelm you :)


And you don't have to specifically remove() it from its old timeline because it can only exist in one place at a time anyway (it'll automatically be removed from the old parent). 


Does that help?


  • Like 3
Link to comment
Share on other sites

Yes, that is helpful!  Thank you all for explaining how to best understand this use of your library.

  • Like 1
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.