Bills123

I appreciate the feedback @mvaneijgen and the basis to start here! I will post my final results. Thanks! Bill

Hi Everyone, I have an animation request that involves a larger circle (#main_circle) growing and repositioning around a banner, while a smaller circle (#purple_circle) is suppose to move along the visible edge of the larger circle as it transitions. You will see in the CodePen that I currently just have the #purple_circle linearly moving to it's final positions in each frame. However, it actually needs to move along the visible edge of the #main_circle during the transitions from frame 1 to frame 2 and from frame 3 to frame 4. I have spent several hours banging my head on this and have no code to show for the actual transitions. My searches point me in the direction of using SVG paths and the MotionPathPlugin, but I will be honest, I have been using GSAP to animate banners for a couple of years now, and every time creating and manipulating SVGs comes up, I get completely lost. I also am not sure about the paths changing as the #main_circle grows and moves around the banner. I would gladly avoid the SVG route if possible. Any suggestions would be greatly appreciated! Thanks in advance!