Streaming live at 10am (PST)

Fade out interaction on each section


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 :slight_smile:


Webflow link:

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

1 Like

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. :slight_smile:
Anyway thanks a bunch for your replies!

1 Like

Ah, so you are content with what you achieved already?

Yeah, by using built-in interactions you cannot control their options like speed etc.

1 Like

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

1 Like

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.