Jump to content
Search Community

SVG child no rotationX & rotationY

failure13 test
Moderator Tag

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

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