Timeline kill issue

[Bannernow]

I have found an issue in TweenMax (v1 and v2).

The codepen is a simplified version of the full animation.

Basically it needs to rotate element -30deg then +30deg, then kill the item animation and restart the loop.

*The kill is used because in the full version I am updating text on each loop dynamically.

*I'm not using onComplete event because the codepen represents only a small part of my animation and I need to restart the timeline at a specific second.

Please let me know if this is a known issue and if there is a workaround.

See the Pen YzVQbpj by bannernow (@bannernow) on CodePen

[GreenSock]

Well of course I'd strongly recommend updating to the much more modern, lightweight, and capable version 3.x but if you need to stick with the old 2.x version...

 

The problem is that you've got the playhead past 2 seconds, then you're killing, then adding new tweens and then restarting which moves the playhead BACKWARD after you just inserted fresh tween, thus they render in reverse order (because whenever the playhead is moving backwards it must render in the reverse order). The solution is to simply add .progress(0) right after your kill(): 

timeline.kill(null, item).progress(0);

 

For the record, this is exactly the type of thing that GSAP "effects" are great for in v3: 

https://greensock.com/docs/v3/GSAP/gsap.registerEffect()

 

Is there any particular reason you're using the old v2.x? If you need to migrate, see

 

 

[Bannernow]

@GreenSock Thanks for the prompt response!

The progress(0) solves the issue but I'm not sure it will work if I will need to update the element dynamically during the animation.

For example change text and continue the animation (new text will increase element size and if it has x,y animation it should be killed first).

 

*Would like to move to GSAP3 but this is a part of a legacy project...

[GreenSock]

30 minutes ago, Bannernow said:

The progress(0) solves the issue but I'm not sure it will work if I will need to update the element dynamically during the animation.

For example change text and continue the animation (new text will increase element size and if it has x,y animation it should be killed first).

 

I'm not sure I follow - your example was doing a restart(), so the playhead goes back to the beginning anyway - this solution merely changes the order of things slightly so that rewinding occurs before you add the new animations. 

 

30 minutes ago, Bannernow said:

*Would like to move to GSAP3 but this is a part of a legacy project...

For the record, the vast majority of legacy code still works in v3.

[Bannernow]

What would be the best solution to reset the animation for the element during the timeline play?

For example if user inputs the text and the text container width/height are increased - I want to re-create the animation.

Currently I'm using timeline.kill(null, item); then applying the new styling and then adding to timeline using timeline.add (without pausing the timeline itself).

[GreenSock]

6 minutes ago, Bannernow said:

What would be the best solution to reset the animation for the element during the timeline play?

For example if user inputs the text and the text container width/height are increased - I want to re-create the animation.

Currently I'm using timeline.kill(null, item); then applying the new styling and then adding to timeline using timeline.add (without pausing the timeline itself).

Please provide a minimal demo. I think that'll significantly increase your chances of getting a good answer

 

If you're asking how to flush any recorded starting/ending values so that it re-records them on the next render, invalidate() is the key. 

 

Once we have a minimal demo to look at, I'm sure the answer will become apparent.