Jump to content


Animating a Group of Referenced svg's

Go to solution Solved by Diaco,

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



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. 




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

Link to comment
Share on other sites

  • Solution

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 );

  • Like 2
Link to comment
Share on other sites

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. 

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