How do I create a sticky section that layers sections on top of each other?

Design help General
1

I recorded a Loom video of what I’m trying to accomplish: Loom | Free Screen & Video Recording Software | Loom

In short, I want to create a sticky section where: as I scroll, the content of each section fades in and out, and the next section replaces it, all while the viewport is stuck until the end of the 5 sections.

Here is my read-only link: https://preview.webflow.com/preview/almanacdocs?utm_medium=preview_link&utm_source=designer&utm_content=almanacdocs&preview=099a19132aae91ac95ccf11f93e1a424&pageId=61329ac1659b1a7272cb8fb7&workflow=preview

Here is my published link: https://almanacdocs.webflow.io/new-home

Thank you for taking a look and if anyone can help, I’d greatly appreciate it!

2

Hey, if I understand it correctly, you probably want to be working with fixed sections inside a sticky scrolling container.

Something like what I’ve made for this cloneable, but reversed: https://webflow.com/website/Sleepy-Interactions

Each section at the bottom would initially be pushed down 100% (or 100vh) on their Y-axis transform values, where each section would have a higher z-index than the one before, making them stack on each other.

Then you would add a “while scrolling in view” interaction on their parent scrolling container, animating each section’s Y-axis transform values back to 0% one after another.

I also have this cloneable which features one of those described above (the red one) which may help a bit: https://webflow.com/website/hidden-hover-sections

And this video I made which isn’t exactly what you’re looking for, but also may help a bit: Smooth Horizontal Fixed Section Scrolls in Webflow - YouTube

:slight_smile: