Jump to content


gsap bug with scale animation

Recommended Posts


Is it a bug or I don't understand something? In this pen gsap before animating scale suddenly manually set it to 1 before animation. So, for example, when in css scale=0 and i want to animate to scale =1, animation doesn't happened. Why is it so?

See the Pen rNGEYWP by mblandr (@mblandr) on CodePen

Link to comment
Share on other sites

As you can see in the DevTools GSAP is transforming the `transform: scale(2, 2)` property and you are targeting the `scale:` property directly. This is a bit of a new feature in CSS and targeting it directly has less support by browsers. 


It is really interesting that we're in a transition phase now with these properties and I'm also interested in what @GreenSock thinks of this. 


Personally I'm sticking with `transform: scale()` for now, but I do have to admit that targeting the properties directly is much more intuitive.


See the Pen JjvEQzb by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
Link to comment
Share on other sites

That should be resolved in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js


It is actually rather annoying that browsers are now trying to do something GSAP has been able to do for almost 10 years, and they're still not even close to parity. It forces us to apply workarounds because some browsers merge them with transforms and some don't. We have to merge them ourselves and then set translate/scale/rotate to "none" to prevent contamination. And without GSAP, you still can't independently control "x" and "y" (they're merged in translate for the browser). And there's no skew. Same thing about breaking apart scaleX and scaleY. 


But yeah, we've already implemented forced merging of that data into the normal "transform" that GSAP applies. I'm with @mvaneijgen - I wouldn't personally use any of the new scale/translate/rotate CSS properties due to compatibility issues and other limitations. I'd just go directly through GSAP. Or if you need to set something up in its initial state, you could use CSS "transform" which is universally compatible. 

  • Like 3
Link to comment
Share on other sites

Yeah it seems wild that they've put in all this effort in via interop and everything and you still can't separate out x and y 🤷🏼‍♀️

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.