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