Column Opposite Scroll + Cover Effect Help

Hey All!
I want to try to recreate this effect (the header with its column opposite scroll and the image / text overlay at the beginning) for my portfolio. Hoping this will work on a CMS page.

I have tried two different ways so far – using a scroll into view method and one that uses code somehow? Both end up a bit funky and I can’t figure out the ‘cover’ bit too.

Here is my public share link

Hey @Amber_Johanna you can check out this example, let me know if everything is clear in terms of implementation. There are 2 sepparate animations, one for loading the stuff and one for actual scrolling and they need to be appended to different elements so they don’t disrupt each other.

https://preview.webflow.com/preview/monthly-quiz?utm_medium=preview_link&utm_source=designer&utm_content=monthly-quiz&preview=cdb0db89cebc56535eda2734410d3dd3&pageId=64f5b949bc77c145a443b470&workflow=preview