Issues with animations on mouse move over?>?

Hi all

Im seemingly have massive problems with this animation im trying to create with moving the mouse on x axis. as you can see even though ive set both side divs to 15vh they start off at different sizes and even though they have opposite but even opacity changes they are changing opacity at varying times?? has anyone else come across this or knows where im going wrong because it plain and simple is not making any sense top me at all.

if anyone can have a look and see what they can find, it would be muchly appreciated

https://preview.webflow.com/preview/mun-another-test-ebbd257e6d4da68cc89c09?utm_source=mun-another-test-ebbd257e6d4da68cc89c09&preview=c9e832c44328b222f782342147ac103b

Kind regards and happy designing


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

https://preview.webflow.com/preview/mun-another-test-ebbd257e6d4da68cc89c09?utm_source=mun-another-test-ebbd257e6d4da68cc89c09&preview=c9e832c44328b222f782342147ac103b