euan.cowie

I see! I had another look at what I was doing. With the <g> elements I can no longer position my "Player(s)" by x,y coordinates as attributes but I can still use a transform attribute. I've made a new codepen, here: https://codepen.io/euan-cowie/pen/ExgyKLO Would this be the best way of creating them (w/o <svg> nesting, w/ <g> "grouping") then? This updated codepen uses React to show what I'm really trying to get at - from a hierarchical POV. This codepen also shows the current problem I'm working on - which is how to update the rectangle above the "Player" <circle> with the current position of the player while animating. My presumption is to use the onUpdate var of timeline.to() but I don't know the best way to pass this information from a parent component to a child component without breaking encapsulation. This is more a question for a React forum or something though... Thanks for all your help. It's been very informative!

Thanks for the feedback! You were, of course, right on the money $$$. I was completely unaware of the "attr" var and the AttrPlugin. I'll definitely take your experience of nested SVGs in to account and do a little experimenting. I'm just not aware at this time of any other method as convenient when it comes to keeping elements neatly positioned in their respective "containers". Thanks again!

Hi there! I'm working on a React project and am using GSAP for my animations. The animations I'm performing are on SVGs using the timeline. The problem I've run in to is that I'm unable to perform the animations (.to() transforms) on <svg> elements themselves. This seems to part of the specification: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform. My code contains an outermost <svg> with nested <svg> elements within. It is these nested SVGs I am trying to animate. NB. The reason I need to use nested SVGs is that I want to keep relative positioning of their child elements and not have to programmatically maintain position of each child element... However, things work perfectly fine if I wrap each of these nested SVGs with a <g> and perform the GSAP timeline.to() calls on those elements. I feel like this is a cop out and leaves the semantics of the XML much to be desired (it doesn't look good if each group only ever has a singular child). I'm wondering if I'm missing something in the Greensock API or maybe even perhaps something fundamental with regards to the SVG spec. I've attached a simple codepen to give an idea of what I'm on about :) I appreciate any help offered! Thank you! Euan