Issue with stagger and overwrite: auto

[benrbnt]

Hello! 

 

I just faced a problem where overwrite: 'auto', is not overwriting pending staggered items.

 

In the codepen, you can easily reproduce by clicking the show button and then quickly the hide button (while the "show" timeline is still animating), or by pressing the simulate button (which show then hide quickly).

 

The issue is that the elements currently showing using a stagger, are not going to be "overwrited" by the hiding timeline that is not using any stagger.

 

I guess that's because the overwrite: 'auto' of the "show" will be applied when the staggered items start animating, so it will overwrite the tween applied in the "hide". I

 

I believe that this should not behave like that, but maybe I am wrong and this is the expected behaviour.

Waiting for your answer! Thanks !

See the Pen PoLYNdj by benjaminrobinet (@benjaminrobinet) on CodePen

[GreenSock]

Hi @benrbnt. Yes, this is definitely expected behavior. From the docs: 

Quote

 If "auto", when the tween renders for the first time it hunt down any conflicts in active animations (animating the same properties of the same targets) and kill only those parts of the other tweens.

In your demo, the animations that haven't started yet aren't "active", thus they'd be immune from the overwrite behavior. It is not intended to find all future animations that haven't even started yet and overwrite those; it's only for ACTIVE (in-progress) animations. It could be quite problematic if you've got a whole bunch of animations that do various things to a particular element in the future and then you start a tween now that has overwrite: "auto" that nukes all future tweens, even ones that haven't started or are paused or whatever. See the problem? 

 

You can simply do overwrite: true if you'd like to nuke all those instead. 

 

Or you can use gsap.killTweensOf() to target just specific properties, like gsap.killTweensOf(myObject, "opacity,y");

 

Does that clear things up? And thanks for being a Club GSAP member! 💚

[benrbnt]

Makes more sense, thanks for your answer !