rotationY not working!

[therddlr]

Guys, sorry for third issue, but I have no idea what is going on! 

I have the same animation with anime.js and it's working no problemo.

Trying to migrate to GSAP and have this issues over and over.

 

See the Pen MZKRNN by dubdub (@dubdub) on CodePen

 

Why rotationY doesn't apply?

 

(the second issue here transformOrigin doesn't set by TweenMax.set properly, but I already created dedicated topic about this)

See the Pen MZKRNN by dubdub (@dubdub) on CodePen

[Carl]

The SVG spec does not officially support 3D but you can get the behavior you want using CSSPlugin.useSVGTransformAttr = false;

 

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

 

however this is not recommend as explained here:

 

 

 

[therddlr]

@Carl thank you, didn't know that! SVG has so many secrets ?

 

Incredibly enlightening, can't believe how much time I needed to spent to figure this out myself, so THANK YOU again.

 

Then probably I could make another animation for this.

[GreenSock]

Yeah, I'd be very careful about using 3D animations in SVG - it probably won't work in all browsers. GSAP originally used CSS transforms on SVG elements, but we discovered a bunch of little annoying bugs and inconsistencies across browsers (unrelated to GSAP), so we switched to using the "transform" attribute instead to normalize behavior and to be consistent with the spec. I'm sure you'll see that 3D CSS transforms work in Chrome and some other browsers (which is probably why anime.js was 'working'), but I suspect you'd find that your stuff broke in various other browsers. We work really hard to deliver consistency across browsers with GSAP as much as possible.