Jump to content
GreenSock

failure13

SVG child no rotationX & rotationY

Go to solution Solved by Carl,

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

Since v1.16.1 all tweens that i had on my project, which have been animating svg nodes children now off, why?

 

P.S. Well i kinda can guess, knowing svg specs, but still, ain't there any workaround to that?

Coz it worked pretty much everywhere except iOS 7 and less...

Link to comment
Share on other sites

Without some code and context it will pretty hard to even know hat specifically you are talking about.

 

Also the SVG spec does not support 3D Transforms only 2D Transforms. When you use rotationY or rotationX you are rotating on and intersecting positively and negatively on the  z-axis plane. But you can use rotation.

 

Please provide a codepen example, thanks!

 

  • Like 2
Link to comment
Share on other sites

  • Solution

Yes, to make behavior more consistent with all browsers and the spec we are using the transform attribute when applying transforms to SVG.

To revert to the old behavior (which will allow 3D in Safari) use:

CSSPlugin.useSVGTransformAttr = false;

TweenLite.to("circle", 1, {rotationX:180, transformOrigin:"50% 50%"});

http://codepen.io/GreenSock/pen/jbJBGO?editors=001

 

Full explanation: http://greensock.com/forums/topic/11676-3d-transform-issue-in-gsap1161-when-rotationyx-applied-to-inner-svg-elements/?p=47584

  • Like 4
Link to comment
Share on other sites

Thx Carl, i just new you still have some rabbits in hat left! ;)

 

But what about future, do you have some plans to emulate 3d-transform for SVG nodes using some supported values like skew, scale etc?

Link to comment
Share on other sites

I get what you're saying but we haven't really considered doing any sort of "mock-3D". In this pen http://codepen.io/chrisgannon/pen/vNJKJM Chris Gannon uses MorphSVG to make the fins of the rocket appear to be rotating in 3D. It's quite convincing!

 

and here is another little trick: http://codepen.io/chrisgannon/pen/xGzxoJ

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