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