Fade out section on scroll up, but how to fade back in?

Hi everyone!

So I see how to fade out the section on scroll down (see my question below all the screens):

BUT, I can’t figure out how to create the animation to have it appear again when I scroll back up… Because when I test it out, it never appears back in when I scroll up…

Any help would be really appreciated!

Thanks in advance!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

can you please provide your read-only link?

@PixelGeek Surre thing! Here it is:

https://preview.webflow.com/preview/marinas-first-project-36f0e9?preview=f9ecc6e498584765426ac6820f35e20d

Hi @PixelGeek

If you’ve got a solution on this one it would be great - i’m also trying to assist with a similar request for @FernXL here: How to program Scroll Out Of View feature? - #14 by StuM

Thanks!

1 Like

Hello!

The answer is actually pretty simple!

So you’ll want to use the “Scroll Into View” on the Element Trigger rather than on a page scroll.

Then, make 2 interactions. One for the scroll into view and one for the scroll out of view. Give the offset a percentage other than 0. I used 50% because I think it looked good.

Next, give the out of view interaction an opacity of 0 and set your durations and easing to whatever you like.

Lastly, give the in view interaction an opacity of 100 and set your durations and easing.

And that’s it! When you scroll down it will fade out and when you scroll back in it will fade in. If you don’t like the 50% offset you can play around with it until you find your desired scroll point.

Let me know if you have questions!
-Ryan

2 Likes

Thank you @PHRyan! I am going to try this!

1 Like

@PHRyan it worked, thanks Ryan!

2 Likes

Woo! Glad I could help :smiley: