Sorry for the delayed response. There were three national holidays here so I couldn't get to my laptop.
Blake thanks for your codepen. I had a similar suspicion regarding my SVG. Since my SVG animation was just a practice exercise, I didn't bother cleaning the code. Big mistake. To see if I was doing everything correctly I animated a simple svg object along a path in an another SVG and everything was working fine.
Regarding those values for "xPercent/yPercent", I obtained them by doing "trial and error" approach. I kept on changing values until the objects perfectly started following the correct path. After many attempts I was able to get the dollars and eyes working. Yes that's a bad method. That's why these values looked so abrupt.
I do have one question. I'm animating 8 elements that are in constant animating state. They rely only on "transforms" for their animations e.g transitions, rotations etc. I've read that using transforms is efficient. But in my case they are slowing the browser on some older mobile devices. Is their any way besides keeping the SVG code clean and concise, using transforms to help run the animation smoothly? Am I just animating too many elements at once and it's slowing the browsers on some older devices? I know that GSAP is highly efficient (I've seen benchmark scores and compared with other libraries) but maybe I'm writing the code in an inefficient way?