Jump to content


rotationX not working on svg g element

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



I have an svg with many `g` elements that I'm animating independently.  rotationX doesn't seem to work on g elements, though it works with CSS.  Check out the codepen.  Any ideas?



See the Pen mMKzwB by therealsgtpenguin (@therealsgtpenguin) on CodePen

Link to comment
Share on other sites

Hi Dylan,


you need to fix your id, because it's wrong:


should be:





  • Like 3
Link to comment
Share on other sites

Oops thank you.  Fixed.  This was just a mistake from reducing for CodePen.  Problem stands.

Link to comment
Share on other sites

Hi @sgtpenguin :)


Welcome to the forum.


3D transforms are not supported by SVG. You can get away with it in some browsers. Your CSS rotation works in Chrome and Firefox, but not in Edge. The best approach right now is transforming the entire SVG element.


Hopefully that helps. Happy tweening.


  • Like 5
Link to comment
Share on other sites

You're welcome. Thanks for being a Club member. Your support is greatly appreciated.


Please let us know if you have additional GSAP questions. Happy tweening.


  • Like 3
Link to comment
Share on other sites

  • 1 year later...



Just wondering, my rotationY works fine in code pen but not when i test the same code  in Animate CC, rotation works fine though.


Thanks in advance

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.