Responsive Page Scroll Interaction

[KieferOrtuoste (Kiefer)]

Hello,

I’m making a website for my wedding and wanted to create this page scroll animation where two circles are coming together in the middle to form our logo in the middle. I got this to work more or less, but on larger breakpoints, the circles don’t fully meet in the middle.

I have the two circles move by VW as I knew moving them by pixels wouldnt work and by % isn’t much better scale wise. I’m trying to have the interaction move the circles to the middle dependant on their distance because of the viewport.

I would normally make a scroll interaction per breakpoint, but that’s not possible cascading up to larger breakpoints.

Any ideas on how to make this a more scalable/better animation?

---

Here is my public share link: Webflow - Melissa and Kiefer Wedding Website

[Romuald_Jay]

Hi this is an absolute positioning problem.

1. you need to set the reference point of each circle in the middle of the circle : to do that add some transformation to each circle : -50% on X and -50% on Y. Like this the reference point is no longuer the top left of the element but the center of the element.
   

   

2. now everithing become simplier and you will be abble to put circle in the middle of the screen using if you apply 50vw movement on the right circle he is in the center no matter what is the screen size.

Have fun