Join 2 Svgs into one Position and make them bigger

[Honigeintopf]

 

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:

1. Movement: Both circles start from different positions and should move to meet at a designated spot.
2. 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.
3. Scaling: While moving, the circles should also increase in size, ending up larger than their starting dimensions.
4. 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

 

 

 

 

 

 

See the Pen dyLrreq by Honigeintopf-the-styleful (@Honigeintopf-the-styleful) on CodePen

[GSAP Helper]

 What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! For e

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Honigeintopf]

Okay I have updated it with the codepen. 

[GreenSock]

It looks like your math calculations were off - you were calculating the offset from the current position but you were tweening to absolute numbers rather than relative ones. Is this what you meant to do?: 

See the Pen XWQQWJK by GreenSock (@GreenSock) on CodePen

 

But the problem with that is it's not really responsive. You're animating to specific x/y values but the original top/left absolute positioning is different, so resizing your window will result in different offsets. 

 

I think it'd be much cleaner to use a Flip animation instead: 

See the Pen rNbbNVe?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[Honigeintopf]

17 hours ago, GreenSock said:

It looks like your math calculations were off - you were calculating the offset from the current position but you were tweening to absolute numbers rather than relative ones. Is this what you meant to do?: 

 

 

 

But the problem with that is it's not really responsive. You're animating to specific x/y values but the original top/left absolute positioning is different, so resizing your window will result in different offsets. 

 

I think it'd be much cleaner to use a Flip animation instead: 

 

 

 

Does that help? 

That's perfect with the Flip thank you!