FurryJean

Hello, What I am trying to do is combine the DrawSVG plugin with this awesome pen, so that a line can be drawn based on the location of the browser scrollbar. Ultimately I would like to make the dotted line reveal with the rocket ship, so that it appears as though the rocket is leaving the line as a tail behind it. What I hoped to do was create 2 timelines so that I could match up the timings of the rocket and the line reveal. What I can't seem to do is get the DrawSVG plugin to respond to the custom code which links up the timeline to the scrollbar. I was also thinking there might be some simpler way to do this by revealing the line with a mask, but I was not able to find any methods which might work with the browser scrollbar. I'd really appreciate any tips, similar projects, or help you might be able to give. Thanks a ton, Savana

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.

Hello!, My code: http://codepen.io/SavanaPope/pen/xGKKzY 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. http://codepen.io/ihatetomatoes/pen/VYLMrJ 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