Alignment of Animation upon loading page

Hello Community

As a rookie in using Webflow, I’m afraid to turn to you with a rather trivial question…
I’m trying to set up a portfolio website with two counter-scrolling vertical image galleries. So far I’ve managed to create two vertical image stacks that scroll in opposite directions via an animation on scroll. However, what I am struggling with now is the alignment of the two columns upon loading the page as well as at the page bottom. I would like to place two text blocks above and below the images that line up exactly when scrolling all the way up / down.

I have been able to control the start and end position only via the animation Y-Move offset - depending on the screen resolution, however, the ratio changes and the text blocks jump out of alignment…

Any ideas on how to center and perfectly align them regardless of the resolution?

Thank a lot in advance!
Philip


Published Link [0]:https://final-80989f.webflow.io/

Read Only [1]: Webflow - Final