GSAP order of transform properties

[Pavel Zhuravlev]

Thank you for creating such an amazing tool for animation and supporting community.
I have a question about way how Gsap is creating an order of properties for transform while tween/set.

As i understand based on documentation, skew properties come after scale properties (this is exactly what i need),
but when im trying on a practice i see the opposite result where skew is coming before scale properties.
Can you please help me to understand why this happen and how can i change this?
I have attached codepen comparing two results: first one i've set up using css and pick the order by myself, second order was created using gsap set.
Im working on complex animation, part of this animation using scale and skew properties, but im getting wrong result when skew coming before scale.
Thank you so much.

See the Pen MWKEZEa by prod_zhuravlev (@prod_zhuravlev) on CodePen

[GreenSock]

I think it's just a misunderstanding about what "after" means in this context. It's pretty confusing because we read things from left to right, but the way they get applied by the browser is sorta backwards. So if you intuitively think about the un-transformed element getting transformed, GSAP acts like it applies the scaling (in your mind, imagine what that scaled element looks like) and THEN does the skewing. But the string in CSS reads the opposite from left to right. See what I mean? 

 

GSAP always applies things in a consistent order and trust me - that's a GOOD thing. So no, you cannot change that. But you could simply adjust the skewX value so that it includes the scaleX. Here's a helper function that you can just feed your vars object into and it'll do it for you: 

function adjustSkewX(vars) {
  vars.skewX = Math.atan(Math.tan(vars.skewX * Math.PI / 180) * vars.scaleX) * 180 / Math.PI;
  return vars;
}

Here's a fork where I put both elements on top of each other and changed the color of the CSS-driven one to blue so you can see that they match up: 

See the Pen adf6cb0437920a69b642e6d93a0b5fbd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Another option is to use an onUpdate to read the transform value and swap the order on every tick, but that wouldn't perform as well as simply adjusting the skew at the outset. 

Does that help? 

[Pavel Zhuravlev]

@GreenSock
Thank you very much, you read my mind!
This is exactly what I was looking for.
I spent the last day trying to create this function myself, and I'm sure you saved a couple of my next days.
Thanks for the great tool and for the patience in support!