Jump to content
Search Community

Animate 3D with GreenSock - separate animation for children

mgergely 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



I have a task to animate an SVG (simplified map of a city), where road signs are part of the presentation.


Everything goes quite smoothly with GreenSock (drawing SVG lines, rotating the whole image, etc.), but I cannot get the last part to work as intended: the small signs should always face the screen (the camera), while the whole SVG rotates in 3D, and the signs follow the path set by the parent rotation (and other tweens).


Something like this image:



My idea was to rotate them in the exact opposite direction as their parent goes (and the animation should last the same amount of time), but this does not work (except for the Z axis, where it does what is planned).


The codepen has the full SVG (it's quite large), the JS code that I tried to use (and some CSS only so the image can be seen).


Has anybody any idea how to achieve this effect? (Or is it possible at all with CSS / GreenSock animation?


Thank you in advance,


See the Pen QEvyqR by mukagergely (@mukagergely) on CodePen

Link to comment
Share on other sites

Are you saying that you want artwork inside the SVG to rotate in 3D? If so, that's not possible because the SVG spec itself doesn't support 3D at all. You can take the entire SVG element itself (like the container/canvas) and flip it around in 3D because it's a regular DOM element, but NOT the guts of an SVG. 

  • Like 4
Link to comment
Share on other sites

Sorry, but I do not get what you mean by "artwork".


The mentioned SVG paths are transformed, so technically the idea seems to be working (you can check it in the codepen, if you comment / delete the first .fromTo part). The problem is, that I should always see one side of an SVG path, regardless of the transform3d of its parent - while the whole SVG is transformed, the chosen elements should look like they are not rotated at all (other transformations (e.g. scaling) should apply).


To put it in 3D words: I need elements that always face the camera; their position on the screen may change, their size is appropriate to their distance from the camera and their motion paths are set by the containing object (like they are glued to a position on their parent, but always face the viewer).

Link to comment
Share on other sites

I see only the <svg> being animated in 3D space, the inner artwork (<text>, <polygon>) your targeting with 3D transforms are not doing anything, since SVG 1.1 does not support 3D transforms on SVG child elements. So you might see the browser inline styles transform changing, but the browser will not render the SVG child in 3D space since it is not available in the spec.  


SVG 1.1 does not support 3D transforms, even though Safari / Chrome webkit allows it in some instances, which goes against the spec. Safari and Chrome will sometimes allow non-spec behavior for developers, and then remove that illegal behavior to align itself with the spec. WebKit based browsers like Chrome and Safari browsers are known to just add features for developers. But are not meant for production. Whereas Firefox will honor the SVG 1.1 spec and not allow 3D transforms to render. So even if you see the SVG children in the inspector changing values, they will not render 3D for SVG 1.1. You will have to wait until SVG 2.0 is ready for prime time.



  • Like 4
Link to comment
Share on other sites

o.k. - I'll throw my 2 cents worth out here too. :)


I made a little CodePen for you to see the difference. It has two squares with a child square in each. One is an SVG with a child rectangle and the other one is made of two simple divs.


You'll see in all browsers that the SVG itself will rotate just like the plain parent div. 


The child div and child rectangle behave differently. In Chrome, the rectangle in the SVG kind of animates, but it looks more like it's scaling from the center and then back out. In FF and Edge, it doesn't even appear to move. 


See the Pen bZWqGj by PointC (@PointC) on CodePen


I know it's not what you want to hear, but Jonathan is absolutely right. You'll have to wait for SVG 2.0 or go with Blake's suggestion of Three.js.


Happy tweening.



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