Jump to content
Search Community

Directional Rotation on SVG childs tag not working.

rgfx 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

Certainly not a big deal, I commented out the working version. Spent far too much time trying to figure out what was wrong since it was my first time messing with the plugin. 


Found its better to animate svg childs because of pixalization http://greensock.com/forums/topic/10874-chrome-38-scale-svg-pixalization/

See the Pen YPzaOa by rgfx (@rgfx) on CodePen

Link to comment
Share on other sites

Hi rgfx  :)


SVG has no support for 3D transforms. You can transform the whole SVG (the browser renders it to an image first) but not the individual elements.

The possible SVG transformations are: 2D rotation , scaling , translation , and skewing 

at least that's what i know .

  • Like 2
Link to comment
Share on other sites

Yeah, from my understanding, 3D support on the child elements is a mixed bag of results depending on browser.

I believe IE flat out ignores 3D (surprise surprise).


I'm seeing in Chrome that child elements can have 3D transforms appied, but the transform-perspective (or even perspective) is ignored.

Check this fork: http://codepen.io/GreenSock/pen/vEYrrX


notice when the SVG spins the transform-perspective is applied giving it some sense of living in 3D space.

the second tween only spins ".box" and it looks very flat.

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