How to stop or overwrite an ongoing yoyo animation in a timeline on a specific object

[POG 1 Likes (Newbie)]

Hi all,

 

i have a timeline animation where i add one object with a yoyo animation to the scene.

But in the middle of the yoyo i want to overwrite, but the yoyo repeat animation is still going afterwards...

I thought i can do it with overwrite, which works, but after the overwrite is finished the previous yoyo continues ...
tl_scene_1 is the timeline animation object and female_02 an asset on the stage which is added next to other elements which are moving.

 

tl_scene_1.to(female_02, { duration: 5, y: '-=200', repeat:3, yoyo: true, yoyoEase:true, ease: 'power2.out'}, 14);
tl_scene_1.to(female_02, { duration: 1, y: '+=200', repeat: 0, yoyo: false, ease: 'power2.out', overwrite: 'auto' }, 16);

 

I tried also to use killTweensOf to stop it, but than the relation to the timeline is completely removed.
So i guessed with a simple overwrite i can keep the whole animation in the timeline, without removing a tweening object, only because i want to stop them.

Any ideas, how to solve this.
Peter
 

[ZachSaucier 7,162 Likes (Superhero)]

Hey POG. It seems to work as intended on CodePen for me:

See the Pen GRoWede?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Can you please modify this demo to recreate the error?

[POG 1 Likes (Newbie)]

Hi Zach,

 

it seems it has to do with GSDevTools ...

 

See the Pen LYGWvKE by POG78 (@POG78) on CodePen

 

[POG 1 Likes (Newbie)]

Updated it now with the correct fork of your example and setup the baseline as in my example.

Hopefully it can be done somehow with GSDevTools activated to have maximal control on creating the animation  

[GreenSock 18,864 Likes (Superhero)]

I don't think it's actually possible to get the behavior you're expecting. Allow me to explain...

• The "auto" overwriting occurs the first time the tween renders (it looks for other overlapping tweens at that point and kills them). Once a tween (or a portion of a tween) is dead, it's permanent. 
• GSDevTools forces the playhead of the root to the end initially and then back again in order to ensure the accuracy of the duration. For example, a timeline.tweenTo() may be embedded somewhere, and it can only discern its duration once there's a render and it can sense where the playhead is. In other words, if we DON'T force the playhead to the end and back again, the duration may suddenly change once that tweenTo() begins. Plus doing a progress(1).progress(0) allows all those instantiation tasks to run initially, thus you get better performance during the animation. 

So in your example, the overwrite would happen right away (when the progress(1).progress(0) happens), thus you'd never see the initial y: "-=20" animation because it's dead as a doornail. 

 

So it's more of a logic issue than a bug (unless I'm totally missing something). 

 

In the next version of GSAP/GSDevTools, I will fix that issue that prevented "auto" overwriting from occurring, but that doesn't solve your example as I explained above. It'll just nuke that first tween right away (which is the proper behavior from what I can tell). 

 

I'd generally advise NOT to build animations like that where they overlap. I suppose sometimes it's tough to avoid - it's not like you're breaking a cardinal rule, but as you see here it can create some logic problems in some scenarios. It'd be better to build your sequence properly so that the "y" value goes up with one tween, and then down with another, and don't overlap them. 

 

Does that clear things up at all? Sorry about any confusion there. It's quite an edge case. And again, it'd only affect overwrite: "auto" when GSDevTools is run on the root. 

[POG 1 Likes (Newbie)]

Hi, sorry that i get back so late to this and thank you for that detailed information.