Text animation with growing masking div from left to right

Hi there, I’m trying to create an animation where paragraphs are appearing within a growing masking div from left to right. The paragraphs should always stay in the same position. Been playing around, but can’t seem to make it work how I want to.

The paragraphs that need to be animated are on the left side of the container. When hovering over one of the menu items I like the visible paragraph to hide and a new paragraph to appear with the masking animation.

Help much appreciated! ))


https://preview.webflow.com/preview/eoth?utm_medium=preview_link&utm_source=designer&utm_content=eoth&preview=656d97a7bb16b85512bccd9741aaa20e&workflow=preview