Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sgtpenguin

rotationX not working on svg g element

Recommended Posts

Hello.

 

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?

 

-Dylan

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:

id="#Racket"

should be:

id="Racket"

 

 

 

  • 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

Ah.  That makes sense. Thank you.

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

Hi,

 

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.
×