mblandr Posted September 16, 2022 Share Posted September 16, 2022 Hello! 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 More sharing options...
mvaneijgen Posted September 16, 2022 Share Posted September 16, 2022 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 3 Link to comment Share on other sites More sharing options...
GreenSock Posted September 16, 2022 Share Posted September 16, 2022 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. 3 Link to comment Share on other sites More sharing options...
Cassie Posted September 20, 2022 Share Posted September 20, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now