Honigeintopf

That's perfect with the Flip thank you!

Okay I have updated it with the codepen.

Hello everyone, I'm working on a web animation project involving two SVG circles. My goal is to have these circles move to a specific position on the screen, overlap exactly at the end of their movement, and simultaneously scale up during the transition. Additionally, both circles are part of an ongoing animation that needs to be stopped as this new animation starts. Here’s what I’m attempting to achieve: Movement: Both circles start from different positions and should move to meet at a designated spot. Overlap: At the end of the movement, I want the circles to perfectly overlap each other, right now they arent really overlapping and its incosssistent, so when the screen size or the div size of the center div increases, it isn't working. Scaling: While moving, the circles should also increase in size, ending up larger than their starting dimensions. Stopping Ongoing Animations: Each circle is initially involved in a separate continuous animation (like moving arround in place nothing special, I already have that). These animations need to be stopped right before the new movement and scaling animations begin. I've been using GSAP for the animations, and while I can get them to move and meet, I'm struggling with getting them to overlap perfectly while also scaling them up correctly. The images show how I want it, but can't get it to work. Best regards and thanks in Advance