Animating a Group of Referenced svg's

[FurryJean]

Hello!,

 

My code:

 

I am sorry that my attached Codepen will not work. I am not sure how, or even if, you can use codepen with referenced svg's in the manner that I have. I am testing with XAMPP and the above code does work in that context. I am trying to animate a parent container which contains a bunch of svg object references. I would like to create an earthquake effect which requires me to rotate "Land," VolcanoOutline," and a bunch of other svg's together as a group. They need to rotate around the same origin, which I want to be able to define through this parent container. I have done this technique before using a nesting system like the following codepen, which uses <g id="name">....children with their own id's......</g> to animate the tomato as one piece. 
 

See the Pen VYLMrJ by ihatetomatoes (@ihatetomatoes) on CodePen

 

This works great because I can animate the group as a block as well as the separate id's within the group.  

 

The problem is that my animation has highly complex svg's and I would like to keep the html clean by referencing them. When I try to replicate the same grouping technique with my referenced svg object's, it does not seem to work like it does when you are using inline svg. Is there any way to use GSAP TimelineMax on a parent container which holds a bunch of referenced svg objects?

 

Thank you so much if you can help me!!

 

P.S. - I have attached the project as well if you want to try it locally with the svg's working. 

 

 

FurryJean.zip

See the Pen xGKKzY by SavanaPope (@SavanaPope) on CodePen

[Diaco]

Hi FurryJean 

 

if i understood correctly , at first pls remove <g> tag from your html ( The g element is a container used to group objects in SVG not html ! ) and then rotate ".master" ( SVG object's container );

[FurryJean]

I ended up using id to rotate the parent container, and learned quite a bit about how to set up the animation properly so it can be globally moved and scaled easily. Turns out I just can't touch properties like scale, rotate, x, or y in TimelineMax on the same id which I would also like to use to globally control the transforms of my animation for positioning. My issues were also compounded because I did not realize I could use position:fixed to have my various elements overlap so finding the correct origin for rotation would be easier. 

 

Just wanted to thank you for dealing with my noobishness. Between you, and the other 3 or 4 uber active mods on here I have been able to get answers to 95% of my questions.