Jump to content


Tweens remembering their old transformations

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

Hi!  I hope someone can help me with this - I'm trying to build a UI for a text-based RPG I'm developing and I'm having some problems with mouseover tweens on the buttons.  When the function to build the UI is called, it works out which class the button element should tween to based on various properties of the object passed to the function - and this works fine the first time.  When the function gets called again, however (after a click event function which updates the object before it gets passed back to the UI), the new tween for the button seems to half-remember the transformation it applied before.  So rather than playing a smooth mouseover colour-change, it plays the old transformation the first time you mouseover, then the second time it plays the right transformation via the old one (turning one colour before it changes its mind and goes to the correct colour).


I've set the tweens to overwrite: true, but that doesn't seem to affect the problem.  I've also tried removing the tweens in the updater function by using killTweensOf(), but that doesn't work either.  If anyone has any idea what might be happening, with or without a way to fix it, I'd be really grateful!  I think I'm unclear on whether tweens can/should be used dynamically like this, or whether I need to instantiate some with fixed values before the function decides which to call.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Sorry to hear you are having trouble. Its hard to follow your description of the issue without seeing what's happening. For this kind of issue its very important that we can test and replicate the problem. 


I'm guessing you might be using from() tweens in your mouseover or maybe relative tweens, but again its hard to trouble-shoot blind.


I assure you though, the engine doesn't half-remember anything.


We'd love to help you through this.


Feel free to use codepen or jsfiddle to show us the problem or just zip and attach a very basic example.


To save some time, you can just fork this codepen demo:

See the Pen af138af51e5decd43c3c57e8d60d39a7 by GreenSock (@GreenSock) on CodePen

and add your own javascript.



Link to comment
Share on other sites

Hi Carl - thanks for replying.  I'm certain it's my script at fault rather than the engine, but trying to work out what's going on has completely stumped me.  The actual project is a monster of nested objects, which doesn't help, but I think the basic structure approximates to this (thank you for the demo!):


See the Pen FpiEw by Velma (@Velma) on CodePen


Which works perfectly, although after more than one click it throws out far more alerts than it should...  I'll have to go back to my code, I think - the way I've applied my tween events isn't nearly as succinct or clear as your application here, so hopefully getting that straight might clarify things.


Thanks again - and I do love the engine.

Link to comment
Share on other sites

As for the alert firing too many times... yes that was a bit odd.


go back to your codepen.


1: remove the alert() in the changeCol function

2: add console.log(box) in the click function like so



$("#clickable").on("click", function(){
    var newcol = "";
    if(bgcolor=="black"){ newcol = "red"; }
    else if(bgcolor=="red"){ newcol = "black";}

test the pen and view the console.

you will see that each time you click on "#clickable" you keep getting more and more box logs.


I'm pretty sure the problem is that the click function was defined inside the play() function.

If you move it outside that function and make some small changes I think it will work like you want. 


View this example:

See the Pen 90292448f2f7cc1c41a849b16a61227e by GreenSock (@GreenSock) on CodePen


Each time you click the mouseover color will change on each element. You won't get any unnecessary logs.


Is that closer to what you need?

  • Like 1
Link to comment
Share on other sites

Yeah, it looks like the reason you were getting multiple alerts had to do with the fact that every time you changed the color, you called changeCol() which in turn called play(), and inside play() you were adding mouse event listeners again. So they were adding listeners over and over again. 

Link to comment
Share on other sites

Oh, thanks guys!  Yeah - I see what you mean.  I hadn't realised the click events would keep overwriting themselves like that.  I'd tried to do something in the original project about switching them off at the right time, but it never really worked...  It would make sense if the problem I was having came from the event trying to be able to reverse all the different tweens it was storing up.  I'll have to move a bunch of stuff around, but I should be able to get it to work this way.  I'll let you know - but thanks so much in any case!

Link to comment
Share on other sites

This worked great - thank you so much!  I had a slight snag, I think because I was tweening between class names rather than actual properties, where some information was left in the various elements' style attributes and blocked the next tween from having an effect, but that was straightforward to fix by clearing the style attributes at the start of each play function.  I'm looking forward to trying the next animations...!

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.