Hello,
As in the title, I would like to create fade out interaction on each section when it’s scrolling out of the viewport. I achieved what I wanted on first section but not sure how to do that on the rest of them.
Any tips appreciated 
Webflow link:
https://preview.webflow.com/preview/submer?utm_source=submer&preview=2b94d3310a39ea09256e5a2fdbdecf8b
Here is my public share link: LINK
(how to access public share link)
Do this for any element you want to fade in/out when scrolled in/out of view. Remove ix from your panels
Thank you for your reply.
It helped a bunch but I want the element to fade out earlier and faster - not to be visible under the navigation.
And I was playing with it but can not achieve it.
Just tweak the offset value to see what suits you best.
I understand. But it feels this way I can not control how much time the fading out takes (?)
You set this interaction for “while scrolling in view”. Set it to “scroll into view”
I understand, I already tried it and as I said above its only possible to control when the fading out starts
with offset but not how long it takes (I’m still new to webflow, but that’s how I think it works).
So i set it up like this:
and that’s what I wanted.
Anyway thanks a bunch for your replies!
Ah, so you are content with what you achieved already?
Yeah, by using built-in interactions you cannot control their options like speed etc.
Well, not fully yet.
I see when I am scrolling its working well but when I am using navigation then those fade outs are not that good… like they don’t have time to fade out properly. Not sure what to do about that -.- hah
Not much you can do - it depends on the visitor’s device. It works smoothly on my laptop but may not look as good on a weaker device.
Hey! I have the same problem, everytime. It seems like webflow still doesn’t have a proper setting for an effective fade in-fade out animation. I’ve tried everything, if I find a way I’ll let you know but so far no luck with this. Let me know if you find a way please.
