How to Create Text Scroll Animation With Hero Background Frozen

Hey guys,

I’ve tried to find a tutorial or thread to figure out this interaction but couldn’t find any. I’m trying to simulate the Apple Scroll on an iPhone when the user scrolls.

In the hero section, the main background section will be frozen until the user scrolls through the text change.

To put it in perspective, the animation will go like this (as I couldn’t find a video to show an example).

Hero section at home:

-Hero Text Appears
User Scolls
-Hero Text moves up and fades out
-New Hero Text appears from bottom of text section as first text fades out
This will happen 3 times then the it will scroll into the next section

Any insight helps, I just can’t solve the background hero section hold until the simulation is done, as well as the text moving interaction.

Thanks guys, and happy holidays


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