Es-her

Ok, I really want to learn Greensock. I am pretty good with HTML & CSS but Javascript has always left me confused. I understand it somewhat but need to really practice and get better with it. I was able to move my arrows the way I wanted to inside of codepen but now I have another question, so far, the svg I have been working with, I copied and pasted right into the HTML, such as:<div> <svg><g id="usa"> </g><g id="TX"></g></svg></div> If I want to link the svg using an object tag instead of pasting the svg code inside the html how would I target the inside groups of the linked svg? When I linked to the svg using: <object data="images/USAStates2.svg" type="image/svg+xml" id="u"></object> The animation stopped working. I just want to know how I can target my individual groups inside the svg that is linked.

Thanks for all the responses, I will try them out and see if I can make it work like I want. OSUblake, the graphic is for a demo company in NJ that will travel to any state for a job. I am no trigonometry whiz but I will try to follow your steps. I was just wondering, do you know if there is an easier way to animate svgs, say with an Adobe program such as Animate CC or is this the best way to animate svgs?

Hi, I am brand new to SVG animation and need help. I have an svg of the USA and am trying to make arrows shoot out of NJ and to all other states. I have the arrows on the states and am using TweenMax.from($("#TX"), 3, {x:220,y:-150}); to make them animate to their final destination. My x and y coordinates are off. Is there an easier way than trial and error to get the precise coordinates of x and y for each arrow? My method of trying different coordinates and nudging them would take me hours to do for 50 states. Also, after they move I want to make them fadeout and then loop. HOw do I chain events? Like first move, then change opacity and then repeat? Any help would be greatly appreciated. Thanks