Streaming live at 10am (PST)

Fade out interaction on each section


#1

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

com-video-to-gif

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)


#2

Do this for any element you want to fade in/out when scrolled in/out of view. Remove ix from your panels


#3

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.


#4

Just tweak the offset value to see what suits you best.


#5

I understand. But it feels this way I can not control how much time the fading out takes (?)


#6

You set this interaction for “while scrolling in view”. Set it to “scroll into view”


#7

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!


#8

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

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


#9

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


#10

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.