Text and image fade in and out on scroll without actually scrolling down the page

Hello everyone!

I have been searching for an answer for this all weekend and cannot find the solution so hoping to reach out to the community for help!

I have a layout where I want different images and text to fade in and out as you scroll down, but having the section fixed until it is finished.

Webflow does a similar interaction in their home page (will attach photo and link) and I will upload the design layout I am trying to achieve this on.

Thanks in advance everyone.

Here is the image. I want the layout to be fixed, but the image on the right and text to fade in and out 3 different times as you scroll.


Here is my public share link:

(how to access public share link)