Applying the same interaction to class siblings on the same page

Hello!

I have a small problem.
I am trying to apply the same interaction - fade out while is scrolling out of a view port to few sections on home page. They all should work the same way - show on the view port and then fade out while moving away.
Those sections are siblings. First one is working correctly and then rest is totally not visible.

Would be glad to hear some tips!
Thanks

Link below:
https://preview.webflow.com/preview/submer?utm_source=submer&preview=2b94d3310a39ea09256e5a2fdbdecf8b


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

I don’t see any fade out interactions on your site. Which elements are you targeting?

Now you will see it.
I am targeting sections called “Panel”. And I have 6 of them on HP.

But the problem is that this fade out effect is treating all of those sections as 100%.
So sections at the end have 0% opacity and they disappeared.

And I want this effect to treat each section separately.
I feel I am missing some key information hah. :slight_smile:

So you want the sections to fade out while scrolling? I guess I’m not really sure what you’re trying to achieve and what it’s doing wrong.

I want to achieve the same fade out for other sections below the first one.
Don’t know how to do that. Because “by class” doesn’t work the way how I thought it would.

com-video-to-gif