Jump to content
Search Community

Scale not animating second time

ThemApps.com test
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 upgraded from 1.9.0 to 1.10.2 to fix a bug I couldn't workaround. But I've found another bug which has broken my game :(


If I put a tween onto a timeline, animating scale and top, with clearProps, and then put an identical tween into the timeline straight after it, the second time it doesn't animate the scale (it animates top OK).


It worked in 1.9.0-beta:



But doesn't work in 1.10.2-beta:



This is urgent as it's holding up going live with my game. Please help!


- Kev


Link to comment
Share on other sites

I found the issue, and it had to do with the fact that old versions of GSAP always re-parsed the transform matrix for each tween (the matrix is basically the css that defines the scale, skew, rotation, x/y translation, etc.) but we discovered that some browsers had a bug that caused them not to report that data correctly in very specific scenarios, so in more recent versions of GSAP we switched to recording/managing the matrix ourselves in order to work around the browser bug (plus it's actually a bit faster for us to do it rather than re-parsing the browser's data). Again, the bug was in the browser, not GSAP.


Anyway, in your example, the clearProps that you were doing was wiping the css data, but it didn't wipe the data that we recorded manually in a hidden object/property, so it was thinking the element was still at a scale of 4 when it had no scaling applied after the clearProps. I have attached a preview of 1.10.3 which should resolve that. 


Note, however, that you could fix it even in 1.10.2 by adding parseTransform:true to your tween(s) - that just forces CSSPlugin to reparse the transform matrix. Normally that is NOT necessary, though, which is why we haven't documented that "feature" :) 


My apologies for the glitch in your game that this caused, but I'm pretty sure 1.10.3 will resolve it. Please let us know. 


  • Like 1
Link to comment
Share on other sites

Two hours from posting my problem to getting a solution, I'm very grateful, and impressed :)


I guessed the issue was something along those lines, I've wrestled with CSS matrices myself before now.


Using parseTransform: true has fixed it for me, so I can stick with my current greensock version (don't want any more surprises when upgrading!).


Many thanks, and keep up the good work. As a well seasoned javascript app/game developer I can see you guys have a deep and throrough understanding of javascript/DOM/browsers and greensock is simply beyond compare in its field, it'll be standard on every project I work on in future.


Thanks again. Very grateful for your help.

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