Jump to content
Search Community

SVG rotationX/rotationY with GSAP 1.19.1

classikd test
Moderator Tag

Go to solution Solved by GreenSock,

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

Hello,

 

I'm trying to make rotationX/rotationY transforms on SVG shapes with the last version, GSAP 1.19.1, but it does not work.

This is working only with rotation or rotationZ properties.

 

Here you can see that nothing happens on mouseover event:

 

But if i am using GSAP 1.19.0 or lower version everything is working well :

See the Pen NdorKo by classikd (@classikd) on CodePen

 

Is there a bug or do some properties have changed, i have found nothing about it ?

 

Thanks for your help.

See the Pen rjPxKr by classikd (@classikd) on CodePen

Link to comment
Share on other sites

  • Solution

Yep, that's no bug - we used to apply transforms via CSS in Chrome in earlier versions because it seemed to do a decent job, but every other browser had bugs/inconsistencies/quirks, so we applied them via the "transform" attribute in those browsers. Eventually we noticed it was causing a little confusion to have them applied differently in Chrome, so we just switched to always applying them via the "transform" attribute for SVG elements (which is what the spec suggests anyway). And like Craig said, SVG doesn't support 3D. Chrome did technically allow it but that was a deviation from the spec. We really try to make GSAP work consistently across the board, so it just didn't make much sense to have things applied in different ways in different browsers, only support 3D in Chrome, etc. That was the reason for the change in 1.19.1. 

  • Like 4
Link to comment
Share on other sites

PointC, i'd like to animate the shapes within the SVG, not the SVG itself.

Well anyways I'll give up 3d animations on SVG shapes, i must read about the browser support i'm not really aware.

Indeed I understand your choice not to support browsers deviations you're totally right.

I'm a little bit sad but i will find another way to do what i want.

 

Thanks all three for your explainations.

  • Like 3
Link to comment
Share on other sites

Hello classikd

 

Just to re-iterate Chrome is like the Wild West and doesn't honor the spec for consistent rendering behavior. Firefox remains consistent on what the spec allows. Chrome usually adds specific non standards behavior but then will remove that behavior later on to line up with the spec. That is why I always develop in Firefox first and then Chrome. Since Chrome has become a non standard browser never rendering the same with each new version. So be aware that just because something works in Chrome, doesn't mean it will work cross browser. Even the new MS Edge follows the spec, unlike Chrome. Following the spec guarantees that your animation will work cross browser, especially to those browsers that follow web standards in the various CSS/SVG/DOM specs.

 

Just my measly two cents. :)

  • Like 3
Link to comment
Share on other sites

Thanks a lot for your helpful advices Jonathan. 

I recognize that i develop in Chrome by simplicity, it's a little bit faster and i like that each page runs its own process. But is it really worth it...

I used to use Firefox many years ago but i gave it up following the "script not responding" errors i had which made me crazy !

Developing in Firefox would have saved my time in this case and it would drive me in the good direction to follow spec, so i'm seriously going to think about it.

  • Like 1
Link to comment
Share on other sites

I'm pretty sure Chrome is following the spec here. You cannot do 3d transforms in SVGs with Chrome. What you're seeing when animating rotationX is still an affine transformation (2d). I noticed something similar in this thread, but with drawing a 3d SVG inside canvas. That is definitely NOT a 3d transform.

 

Firefox on the other hand, well, it's been able to do 3d transforms in SVGs for some time now.

http://cs.sru.edu/~ddailey/svg/XYZrot3D2.svg

 

 

.

  • Like 2
Link to comment
Share on other sites

Blake I havent looked at that professors examples in quite some time, i love his stuff. ;)

 

But what i was saying "Firefox does not support 3D transforms on SVG 1"  .. I meant as far as doing a real 3D transform. Like using rotate3d(), translate3d() or matrix 3d(). If you try using rotate3d(), translate3d() or matrix3d() in that same SVG example, it will not animate.

 

When helping users in this forum or on stackoverflow, I have come across many examples of only animating rotateY() that would not work on SVG child elements in Firefox that worked in Chrome, and then some examples that didnt work in Firefox would work in Chrome. But those are the ever changing browser ninja wars. :ph34r:

 

So Firefox will honor the long form 3d transforms if using rotateX() rotateY() and rotateZ(). But with only one caveat.. the long form axis must be in a specific order to render correctly. ;)

  • Like 3
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...