Sticky section fade out when other sticky section moves over it

Design help Animations & Interactions
1

Hi all,

I’m working on a homepage where i’m using the ‘sticky’ option to bring a few different sections into view (effectively layering on top of each other), and I’m wondering if it’s possible to have the section that is being covered (by the next section scrolling in on top) to fade out, or have a darkened overlay fade in over the top as it’s disappearing?

Hope that makes sense!

See preview below on desktop (its the Strength & Conditioning and Golf Physio sections im referring to)

https://preview.webflow.com/preview/peak-golf-performance?utm_medium=preview_link&utm_source=designer&utm_content=peak-golf-performance&preview=637e66fd1255a8bc9dfd4f954dffaccd&mode=preview

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

2

Anyone able to help with this?

3

With a While scrolling in view interaction

image
image2435×1202 358 KB

1 Like
4

Thanks Vincent, it’s not exactly what i wanted to do (was wanting it to use more of the blue colour overlay) but it’s definitely good enough for me to use!

Appreciate it!