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

Design help Animations & Interactions
1

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.

Screen Shot 2022-01-17 at 11.03.25 AM
Screen Shot 2022-01-17 at 11.03.25 AM1920×1103 65.4 KB

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.

Screen Shot 2022-01-17 at 11.01.04 AM
Screen Shot 2022-01-17 at 11.01.04 AM1920×1102 124 KB

Here is my public share link:

(how to access public share link)