Jump to content
Search Community

RotationY not working in version 1.19.1 and above

atep77 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

hi,
  I just found, strange behavior in my codepen. It is just a very simple rotationY example, with works fine in version 1.18.5 (and all 1.18.x a maybe below), but it does not work in 1.19.1 and above, as i tried changing source. I am not sure if it is bug or change in behavior,

thanks

Petr

See the Pen GXzoMa by atep (@atep) on CodePen

Link to comment
Share on other sites

I remember 3D transforms working in Chrome. But looks like they dropped the support for 3D transforms from transform attribute for svg elements.

 

GSAP used to use CSS transforms for chrome but it was changed to transform attribute in 1.19.1 for all browser consistency. Though 3D transforms do work with older versions of GSAP it will only work in Chrome as other browsers don't support 3D spec for SVG elements.

 

https://github.com/greensock/GreenSock-JS/releases/tag/1.19.1

  • Like 3
Link to comment
Share on other sites

Yep, exactly. Originally we applied transforms via the CSS transform property across the board, and only fell back to the "transform" attribute on SVGs in certain browsers that didn't support CSS, but we eventually discovered quite a few browser inconsistencies and problems with CSS transforms on SVG elements, so we switched to being consistent with using the transform attribute across the board. Also keep in mind that the SVG spec doesn't support 3D anyway, so I certainly wouldn't recommend trying 3D stuff with SVGs at this point. You can, of course, use a 3D transform on the SVG container itself, or put it in a <div> with a 3D transform - you just can't do it reliably on SVG elements themselves, like <path>, <circle>, <rect>, etc.

 

Happy tweening!

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...