Using GSAP parseTransform function to get scaleZ value from transform matrix

[SebastianWebb]

Hi guys, 

I'd really like to incorporate gsap in a commercial project, but I've noticed an omission in the parseTransform function in the CSSPlugin file. This returns all the transform functions apart from scaleZ. Is there any reason why? Could support for this be added?

Thanks,
Sebastian

See the Pen JjGRXqm by SebastianWebb (@SebastianWebb) on CodePen

[GreenSock]

2 hours ago, SebastianWebb said:

I'd really like to incorporate gsap in a commercial project, but I've noticed an omission in the parseTransform function in the CSSPlugin file. This returns all the transform functions apart from scaleZ. Is there any reason why? Could support for this be added?

In all my years of doing animation and serving the animation community, I can't remember a single time there was a practical use case for scaleZ. Can you provide one? We just don't want to add kb and processing into the core when basically nobody uses it. See what I mean? 

 

You're welcome to use GSAP of course, but I'd appreciate it if you don't yank portions of the copyrighted code for independent use in a commercial project without getting the proper license. We'd love to have you on the membership roster of Club GreenSock. 👍

 

Good luck with your project!

[SebastianWebb]

Hey Jack, 

Thanks so much for the super quick reply. I need it for a UI I'm building which allows users so control transform properties using sliders and drag etc. I'm including all CSS transform properties for completeness. And I need a way to convert the computed CSS, which the browser returns as a matrix, back into the individual CSS transform functions. The computed value is important because the transform styles might be set elsewhere, not just via the UI I'm building.

Gsap might not be the right tool for this particular job (the results were not accurate for skewY and rotation, even when setting the transform functions in the order GSAP expects - translate, scale, rotate X/Y, skew, rotateZ ). But I have a strong feeling I will come back to it for it's animation capabilities in future. And I will be very happy to get the business license.

All the best,

Sebastian

[GreenSock]

7 hours ago, SebastianWebb said:

(the results were not accurate for skewY and rotation, even when setting the transform functions in the order GSAP expects - translate, scale, rotate X/Y, skew, rotateZ

I think you're gonna find that it's impossible due to the nature of matrices. Rotational values are inherently ambiguous when stored in that way. But if you find a solution, I'd love to see it. 

 

Example: the matrix for scaleX: -1 is identical to rotation: 180, scaleY: -1. There are an infinite number of scenarios like that where you simply CANNOT discern the original component values. 

 

Feel free to send me an example of where you think GSAP's parser got it wrong. Did the resulting transform actually render any different?

[SebastianWebb]

Ah, that's really useful to know. I thought the unexpected values for rotate and skew were due to mathematical error. Your function only ever returns zero for skewY. I thought that was an oversight, but perhaps it's because you represent the orientation in another way.

I did a bit more digging, and found some scripts that might be useful to you. They don't disambiguate everything, but may serve as a useful reference, if you understand the maths (which I certainly don't).

 

https://github.com/mattdesl/mat4-decompose
https://github.com/ismailman/decompose-dommatrix

All the best,
Sebastian

[GreenSock]

6 hours ago, SebastianWebb said:

Ah, that's really useful to know. I thought the unexpected values for rotate and skew were due to mathematical error. Your function only ever returns zero for skewY. I thought that was an oversight, but perhaps it's because you represent the orientation in another way.

Yeah, it wasn't an oversight.

 

One of the goals with the code in GSAP was to do the best job we could with the minimal amount of code to deliver maximum performance and cover almost every common use case. I suspect that the links you provided would eat up 2x-10x the amount of kb and probably wouldn't deliver much better results, at least for most common use cases. I'd be curious to hear what kind of results you get and how they compare. Like I said, the nature of matrix decomposition is just inherently ambiguous and requires certain orders-of-operation. And even with those, you can't truly get the original values back in all cases. That's why we encourage folks to do all their transforms directly via GSAP because it caches the values and keeps them perfectly distinct and accurate no matter what. 

 

Good luck!

[SebastianWebb]

GSAP scrubs up pretty well against those scripts. In some cases one or another was more accurate. But I understand that full decomposition accuracy isn't possible with matrices. 

I'm pleased to say that you've just landed yourself a new customer! The dedicated support you provide made that an easy decision. I commend you. And I'm really looking forward to integrating my CSS editor with GSAP's super cool animation features in future.

Have a great week, 
Sebastian

[GreenSock]

7 hours ago, SebastianWebb said:

I'm pleased to say that you've just landed yourself a new customer! The dedicated support you provide made that an easy decision. I commend you. And I'm really looking forward to integrating my CSS editor with GSAP's super cool animation features in future.

Hey, that's fantastic @SebastianWebb! Welcome aboard. Thanks so much for joining the club and supporting our efforts. 

 

Good luck with your project. 🙌