Jump to content


Can we safely start a new TweenLite on the same parameter without killTweensOf first?

Moderator Tag

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 want to start a tween on an x-parameter but there is a possibility another TweenLite is still tweening the same value.

Now I think pretty highligh about Greensock and it wouldn't surprise me if it's clever enough to stop the running tween when starting a new one.

But I'm not sure.

On the moment I'm having a killTweensOf() before starting the new one, but is that really nececary? Or does TweenLite indeed kill the running tween when starting the new one on the same value-parameter?



2) I was about to killTweensOf a value uses with the PixiPlugin (which is pretty convenient for large projects BTW!). But I'm not sure how to killTweensOf parameters when we're using plugins. I can't find it in the greensock help, but might be overlooking something there. Is this the right approach if we want to kill all tweens tweening the x-position via the PixiPlugin?:

TweenLite.killTweensOf(this.bmp, { pixi: { x: true } });


Or should we leave pixi and just use the x-value instead (so Gsap 'underwater' knows somehow the x goes through the pixiPlugin)?:

TweenLite.killTweensOf(this.bmp, { x: true });



Thanks in advance! And I am happy tweening all day long. This lib is just so well made, it's just so fun to use! Especially together with svg, pixi and threejs! :)

Link to comment
Share on other sites

Good questions. Yes, by default GSAP applies overwrite:"auto" which means that when a tween renders for the first time, it'll look for other tweens of the same target that are controlling the same properties and kill ONLY those properties (in the other/competing tweens). That's automatic. You can, of course set overwrite:true and it'll kill all of the tweens that are running of that same object (regardless of what properties are tweening). 


For killTweensOf(), you don't need to include the "pixi" wrapper. So you can just TweenLite.killTweensOf(this.bmp, {x:true});


I love hearing that you're enjoying the tools so much! :) 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Thanks @GreenSock Jack. Wow, an overwrite mode and I see now even an onOverwrite event.. never knew about these. Guess I will spend some time later to go through all options there to see if there are more ones I didn't know about. But somehow had the feeling this was already build in, because it's pretty hard to think of something that isn't there. Also nice way to kill tweens of variables going through plugins. Thanks a lot for the beautiful work with obviously a lot of passion and experience put in there!

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