A question about rotation transform order (Edited, sorry...)

[Tom B. @ Wix]

I am trying to rotate a Z rotated element on the X/Y axis + perspective and transform-origin, and just can't get the GSAP result to be the same as with the CSS animation result.

 

(My question relate to the attached codepen)
 

In CSS I can first rotate the X component and only then apply the Z rotation, which creates a different animation than the other way around.
GSAP (as far as I know) has a fixed transforms order (I remember @GreenSock writing about it years ago), but still, I tried and tried and wasn't able to get the same animation in both CSS and GSAP (using a single element)

Thanks!

See the Pen QWVQRQB by tombigel (@tombigel) on CodePen

Edited March 14, 2023 by Tom B. @ Wix
I thought i found a bug in the 3d transformOrigin technique, but I had a bug in the codepen

[Cassie]

Hey there!

 

There's a lot of different animations in here so let's just focus on one for now.

You're correct that order is important - but as you're only animating the x value in this one, that would have to come last in the CSS rule to match the GSAP version.

 

See the Pen vYzRpoY?editors=1010 by GreenSock (@GreenSock) on CodePen

This thread is useful for understanding why

 

If you need to match the CSS version for some reason you can animate the "transform" with a string value like

gsap.fromTo('#string .element', {
  transform: 'rotateY(0deg) rotateX(0deg) rotateZ(30deg)'
},{
  transform: 'rotateY(0deg) rotateX(-85deg) rotateZ(30deg)',
  duration: 2,
  yoyo: true,
  repeat: -1
})

Does this help?

[Tom B. @ Wix]

Hi Cassie!

thanks for the quick reply!

 

Sorry, I originally thought I found a bug in the gsap transformOrigin implementation and made an elaborate codepen last night. Today I realized the bug was in my code…

 

anyway, i want to be able to get the gsap animation to do what “first rotateY then rotateZ” does in css. 
 

Animating the entire transform string is an interesting option I haven’t thought about, but it defeats the purpose a bit (I guess it will override the entire transform string like css animation so, right?)

 

Any other trick you know of I can do to achieve the same result?

 

thank you!

[mvaneijgen]

Do you have a Codepen example that shows the issue you're having? With something like the following

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"

[Tom B. @ Wix]

In my original post codepen, I want the purple (gsap) box to animate like the blue (css) box. 
 

 

[Cassie]

Quote

anyway, i want to be able to get the gsap animation to do what “first rotateY then rotateZ” does in css. 

This behaviour is *kinda* a weird bug in CSS tbh - that's why they're separating out individual transform properties now, it's not really the way that transforms *should* behave.

The only way around this is to use the string method. GSAP separates out all the transforms so that there aren't any issues with stacking order.

[Tom B. @ Wix]

It’s not a bug, it a feature, and a very strong one. 

you can do amazing things like that, and when we’ll have @property everywhere we could do things in css that are not possible in js

[Cassie]

To each their own! It's handy sometimes for sure. I've definitely leveraged it for a few things, but I always found it a little unpredictable and limiting.

With GSAP if you're animating the rotation then and half-way through you need to animate scale or a transform property you can, but you can't with the single transform property. I'd go for fine tuned control and predictability any day. It's how most animation software works and that clicks for me.

 

I guess another way to think about this is out -> in

Quote

With transform, the transformation functions get applied in the order they’re written–from left (outside) to right (inside).

With the individual transformation properties, the order is not the order in which they are declared. The order is always the same: first translate (outside), then rotate, and then scale (inside).

i.e. break it out into containing divs.

See the Pen rNZdqOr by GreenSock (@GreenSock) on CodePen

But honestly if I were you I'd just stick with animating the transform string

Quote

Animating the entire transform string is an interesting option I haven’t thought about, but it defeats the purpose a bit (I guess it will override the entire transform string like css animation so, right?)

^ this is what GSAP does anyway,  all tweens ultimately end up as inline transforms, so animating the "transform" property itself doesn't really defeat the purpose. It does have a slightly higher price up front perf-wise.

You could also use GSAP to animate a CSS var. Lots of options! 

[Tom B. @ Wix]

32 minutes ago, Cassie said:

You could also use GSAP to animate a CSS var. Lots of options! 

Interesting!

But then gsap won’t be “aware” of what it’s animating, right? It will just enumerate a number and automatically do setProperty every animation frame?
 

[GreenSock]

Hey @Tom B. @ Wix!

 

There are a bunch of ways to do this: 

1. Nest elements, like @Cassie demonstrated.
2. Animate a string. I wouldn't do it directly on the "transform" property just because GSAP has to parse that into individual components (x, y, scaleX, scaleY, rotationX, rotationY, rotation, etc.) and those can be ambiguous (the same matrix3d() can be decomposed many ways...like scaleX: -1 is identical to rotation: 180, scaleY: -1). In most cases, it'd be totally fine but interpolation between scaleX: -1 and scaleX: 1 is very different than rotation: 180, scaleY: -1 and rotation: 0, scaleY: 1. So you can simply use a proxy: 

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

3. Use CSS variables: 

   See the Pen eYLMovW?editors=0110 by GreenSock (@GreenSock) on CodePen

3 hours ago, Tom B. @ Wix said:

But then gsap won’t be “aware” of what it’s animating, right? It will just enumerate a number and automatically do setProperty every animation frame?

I wasn't quite sure what you meant by that. Can you elaborate? 

[Tom B. @ Wix]

Hi Jack! Long time

 

Thank you for the elaborate answer!

you and @Cassie gave me plenty of ideas to try

 

About my last question, forget it, I’m over engineering things in my head 😅. I’ll just test it for myself. 
 

thanks!