Issue with my scroll animation once I apply overflow hidden to avoid horizontal white space

Hi All,

I’m facing an issue with my scroll animation on my landing page. I never noticed it because I’m usually on a desktop but I was viewing my site on my laptop and was scrolling up and down using the mouse pad and by accident you can’t help but sometimes scroll over to the side - in which a white space on the right hand side shows. I used X-ray mode to trace the actual sources of the horizontal overflow. I found three div blocks - if I set these each to width: 100vw and Overflow: hidden then the overflow disappears.
Div Blocks: ‘Line drawing load animation wrapper’, ‘Homepage Line wrapper 4’, and ‘Homepage Line wrapper 6’.

HOWEVER, only problem now is the “Homepage line wrapper 4” and “homepage line wrapper 6,” shifted the animation over to the right so it’s not in alignment with the other line its supposed to connect to in the center. I tried to play around with the positioning but I can’t get it to line up exactly… Does anyone happen to know what I might be missing in terms of placement/positioning issues, or why once I apply overflow hidden to those elements, the animation jumps over to the right instead of in the center??

My website link is as follows and is live with none of the above applied bc I need the animation to work properly for viewers. You can see here how its supposed to work as a seamless line scroll navigation -

Heres a video of me applying overflow hidden to the elements and what happens to the animation-

Here is a read-only link -

Thanks so much for your help in advance!!