Jump to content


x/y axis rotation of nested elements

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

Dearest GSAP-pers,


I've lurked a long time & am very happy/desperate to post this problem regarding nesting rotation in a DRY svg.


The attached pen shows 3 bars of color. I would like to have them tumble down out of frame on their own axes.  (I plan to randomly generate the values of x/y/z rotation later).


If you click on the left (purple) bar, you will see an approximation of what I'm going for.


PURPLE BAR (absolutely positioned & stacked on top of the first<svg>): Independently rotating on all 3 axes & is a separate SVG

BLUE BAR (<use> element within the top SVG): rotates successfully on the z-axis, but I cannot manage x or y rotation.

CORAL BAR (embedded <svg> element within the parent<svg> & is a sibling of the blue BAR): receives the click event, but refuses to rotate on any axis. .


My ambition is to populate this circle with many bars along the edge in a pattern (as though they were marks around a gauge or second ticks on a clock) that tumble down as the needle (not pictured in the pen) rotates around the center of the parent SVG.


The Problem:

I would like to avoid stacking SVG upon SVG upon SVG in my html and would like to use the <use> (or <symbol>?) tag --or perhaps nest children SVGs for each bar in a pattern. --However, while z-axis rotation in gsap has worked like a charm for me, it doesn't really "sell" the effect of these bars becoming suddenly un-anchored and being pulled down by gravity.



I really would like to learn how to do this within one parent SVG. (It doesn't matter to me what child elements I'd require for the effect. I'd just like to learn the proper way).


If anyone could give me a hint or two, I'd be very grateful...


I've looked over the forum, and elsewhere, quite a bit and haven't quite found a solution.


GSAP is a joy and thank you to the authors.




Screen Shot 2018-02-04 at 12.15.18 AM.png

See the Pen eVZdJQ?editors=1111 by beau_dev (@beau_dev) on CodePen

Link to comment
Share on other sites

You can add rects as child element to svg rather than embedding svgs. Not exactly sure what you are trying to do(plus I am in hurry) but this should be close and will give you ideas. Also note that svg spec doesn't support 3D transforms so rotationX and rotationY won't work in all browsers.


See the Pen eVZBVz?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 5
Link to comment
Share on other sites

Thanks so much for the reply! I'm almost sure there's a way to rotate on more than just the z-axis. It's just a matrix under the hood--as I understand. --But perhaps I'm wrong.


Thank you for the help!



Link to comment
Share on other sites

Hi @beau_dev :)


Welcome to the forum. I'm not 100% sure what you need to happen here, but @Sahil is exactly right. The SVG spec doesn't support 3D transforms. You can animate 3D transforms on the whole SVG. So you could loop through and create all the SVGs or make clones and then animate any of them on any axis, but nesting the elements as children of one SVG won't give you access to x/y rotations.


Hopefully that helps. Happy tweening.



  • Like 4
Link to comment
Share on other sites

Oh.. I'm crushed...  :) . Thank you both for the info.. It's really helpful...!


I guess it's just another problem to work around.



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.