Some questions about rotate 180deg and SkewX 180deg

[zbysir]

The previous issue related to this one is: #585

In this issue, I fixed the previous problem using a temporary solution: gsap.set(squares, {clearProps: true});. However, now I am encountering another issue.

The example is here: https://codepen.io/zbysir/pen/azozVYx. After clicking on the squares, the elements undergo some strange transformations due to the SkewX transition.

Now that I understand how GSAP works, I realize that it cannot accurately obtain the rotate value from the matrix, as referenced here: https://gsap.com/resources/mistakes/#not-setting-all-transforms-with-gsap.

However, I am reluctant to switch to the (“directly via GSAP”) approach because, in my application, the transformations of the elements are controlled by the class of the parent element, and the elements themselves do not know what they should look like. Therefore, implementing "directly via GSAP" is a bit challenging for me (though not impossible).

I am still hoping for some unknown tech that could alleviate my problem.

[jackdoyle]

Yeah, it's always going to be cleanest to set things via GSAP directly. You could still basically recreate what you're doing in your CSS rule, but with a gsap.set() (and the same rule for the target selector text).

If that's too painful for some reason, I suppose in this case you could avoid the rotation issue by setting rotate(179.9deg) instead of rotate(180deg) because the decomposed matrix values more closely align with what you're attempting here. But again, I think it's always best to be explicit with your transform values in GSAP.