HOW TO: "Scroll-through" animations when a user reaches a page section

Hello Everyone!

Thank you for taking the time to read this and help me out.

I’ve always wanted to incorporate “scroll-through” animations in my page designs. Think Apple, how animations seem to trigger and respond to the user’s scrolls. Even Webflow has this on their main site, Notice that when a user scrolls a bit to Webflow’s designer window (starting with the Point Card™ Neon example to Lattice), different shots begin to fade in-and-out and new, smaller snips pop up? It is reversed as the user scrolls back up. I love it!

So for my own site, as of today unpublished, I want to do something similar. I have a Products div, with some sections inside. I want to build an animation that triggers once the user reaches the Products, and the different sections show/hide, fade in/out as the user scrolls inside of it. I also want this to reverse as the user scrolls back up.

If someone already answered this, I’d be happy to read the solution if you find it.


Here is my public share link: LINK
(how to access public share link)