Scale property not working

[filvi]

Hi everyone, I hope that you can help me figure out why the scale property on the timeline seems to not work anymore.

 

# Problem:

Neither in gsap.timeline nor using gsap.to() seem to affect the scale propertyof the DOM target (.gsap-animation in codepen). This is pretty strange because it used to work last time I checked (few weeks ago). Can you please help me to figure out what am I doing wrong and possibly how to fix it?

 

# Extra Info

This seems to be a problem with both Firefox and Chrome on Win 11

 

# Edit + how to fix it

The problem seems to be with CSS scale: 0.5 which seems to work but somehow is incompatible with gsap. I think I will keep it here for future reference if someone else will face the same issue.

 

Thank you for your patience and time

 

best regards

 

Filippo Vicari

See the Pen MWVPZxE by filvi (@filvi) on CodePen

[Cassie]

Hi there, ah, new transform value weirdness. - we'll look into it! Thanks for the heads up

You could approach it by letting GSAP set the transforms.

So -

// in css

elem {
  opacity: 0
}

// then JS

gsap.set(elem, {opacity: 1})

gsap.from(elem, {
  opacity: 0,
  scale: 0.5
})

 

[GreenSock]

Yep, you're exactly right -the problem is that you're using the very new "scale" independent CSS property which apparently browsers completely segregate from transforms. In other words:

transform: scale(0.5);
scale: 0.5;

Would visually result in a scale of 0.25. And if you do a window.getComputedStyle(element).transform, the matrix/matrix3d won't include anything from scale/translate/rotate independent CSS properties. 

 

Frankly, I'd avoid those CSS properties because they don't have universal browser support and you really don't need them because GSAP gives you all of the same benefits plus more. For example, you still can't separate x and y translation with CSS, but with GSAP you can. 

 

It's always best to set transforms directly via GSAP for performance and accuracy reasons. 

 

All that being said, we're contemplating adding support for those in a future release. Here's a beta version: 

https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

I cannot guarantee that'd stay in, but does it work well for you? Can you find any problems with it? It costs roughly 0.12kb gzipped to add support. It also requires forcing inline CSS of scale: none; translate: none; rotate: none; to protect against style sheet contamination. 

 

I welcome input/suggestions. 

[filvi]

On 8/16/2022 at 3:51 AM, GreenSock said:

Yep, you're exactly right -the problem is that you're using the very new "scale" independent CSS property which apparently browsers completely segregate from transforms. In other words:

transform: scale(0.5);
scale: 0.5;

Would visually result in a scale of 0.25. And if you do a window.getComputedStyle(element).transform, the matrix/matrix3d won't include anything from scale/translate/rotate independent CSS properties. 

 

Frankly, I'd avoid those CSS properties because they don't have universal browser support and you really don't need them because GSAP gives you all of the same benefits plus more. For example, you still can't separate x and y translation with CSS, but with GSAP you can. 

 

It's always best to set transforms directly via GSAP for performance and accuracy reasons. 

 

All that being said, we're contemplating adding support for those in a future release. Here's a beta version: 

https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

I cannot guarantee that'd stay in, but does it work well for you? Can you find any problems with it? It costs roughly 0.12kb gzipped to add support. It also requires forcing inline CSS of scale: none; translate: none; rotate: none; to protect against style sheet contamination. 

 

I welcome input/suggestions. 

 

 

Yeah you are right, was a CSS mistake on my side, I think that adding support for not fully supported features can be tricky on your side because of time investment that may or may not pay off.

 

Anyhow, I fixed my CSS and it started working again. What confused me was that I was pretty sure that it was working before, and suddenly stopped. I tested it on Chrome only.

 

 

Thank you for your time and patience

[GreenSock]

On 8/20/2022 at 4:25 AM, filvi said:

Anyhow, I fixed my CSS and it started working again. What confused me was that I was pretty sure that it was working before, and suddenly stopped. I tested it on Chrome only.

 

If that's the case, my guess is that Chrome changed the way they implemented it. Perhaps in the early days before the spec was finalized, they made "scale" get smooshed in with the regular "transform" property, but in a later release they broke it out. I'm totally guessing here. 

[filvi]

5 hours ago, GreenSock said:

If that's the case, my guess is that Chrome changed the way they implemented it. Perhaps in the early days before the spec was finalized, they made "scale" get smooshed in with the regular "transform" property, but in a later release they broke it out. I'm totally guessing here. 

Yeah you are probably right!