Overwrite: none not working?

[BowserKingKoopa 8 Likes (Newbie)]

Overwrite: none is not behaving how I imagined it would. In my codepen example I imagined that the second tween would be ignored because the first tween is already animating the element's "width". Instead it seems like the first tween is being overwritten despite overwrite being set to "none". Am I misunderstanding overwrite? Is there a way to accomplish what I want (where the second tween would be ignored because another tween has already 'claimed' the right to animated "width"?)

 

 

Thanks for any help.

-Ryan

See the Pen BoJMvw by anon (@anon) on CodePen

[padders 20 Likes (Newbie)]

If you remove the 'overwrite: none' from the second tween then the first is completed without being overwritten.

 

I'm not totally sure why though, it seems that the last tween with 'overwrite: none' will be the successful tween in your demo. Multiple tweens with 'overwrite: none' do seem to be able to overwrite any tween!

 

The onOverwrite function might help if you need to debug?

 

http://greensock.com/docs/#/HTML5/GSAP/TweenLite/onOverwrite/

[Carl 9,066 Likes (Superhero)]

hi and thanks for the demo, very helpful.

 

The good news is that for your very particular case the overwrite mode of "concurrent" on the first tween will kill the second tween as requested.

See it here: http://codepen.io/GreenSock/pen/xwpepW?editors=001

 

However, that only works because both tweens are created at exactly the same time. Add a delay to the second tween and it no longer works. 

 

"concurrent" (3) - when the tween renders for the first time, it kills only the active (in-progress) tweens of the same target regardless of whether or not they contain conflicting properties. Like a mix of "all" and "auto". Good for situations where you only want one tween controling the target at a time.

 

 

 

A few notes about overwriting that will hopefully help clear things up as it's admittedly a tricky concept. 

 

When overwriting occurs there is a tween that does the overwriting and a tween (or tweens) that gets overwritten.

Overwriting only happens once per tween, typically when the tween doing the overwriting first renders.

When a tween gets overwritten, it gets killed / virtually destroyed and will no longer exist.

 

in your example when you set overwrite:none on the second tween, that allowed the first tween to continue playing. However, since the second tween was created second, on each update it renders second so you never get to see how the first tween is operating. So behind the scenes on each tick of the engine, the tweens do something like

 

tick 1:

tween 1: "render me!"

tween 2: "No! render me!"

 

tick 2:

tween 1: "render me!"

tween 2: "No! render me!"

 

tick 3:

tween 1: "render me!"

tween 2: "No! render me!"

 

tween 2 always comes second so it gets to modify the width after tween 1, which is what you see.

 

Watch this with the console open:

http://codepen.io/GreenSock/pen/KdZYGa?editors=001

 

Remove the overwrite mode on the second and you will see that tween 1 gets overwritten and it's onUpdate does not fire.

 

And most importantly for your scenario, when you set an overwrite mode on a tween it only dictates how it will decide to overwrite or ignore existing tweens. Overwrite modes do not protect tweens from other tweens overwriting them. 

 

I think the best option in your case is to make use of TweenMax.isTweening() which will allow to check if an object is already tweening http://greensock.com/docs/#/HTML5/GSAP/TweenMax/isTweening/

 

 

So in your case you can see if the div is tweening, and if so, don't allow a conflicting tween to be created.

 

var myDiv = document.getElementById("myDiv");
TweenLite.fromTo(myDiv, 2, { width: "0%", }, { width: "100%", ease: Linear.easeNone});


//only create next tween, if no other tweens are tweening myDiv
if(!TweenMax.isTweening()){
    TweenLite.fromTo(myDiv, 2, { width: "50%", }, { width: "100%", ease: Linear.easeNone});
}