Streaming live at 10am (PST)

How to program Scroll Out Of View feature?


#1

Can anyone help me in how to use the Webflow UI to implement Scroll Out of view?
I was be able to follow the Tutorial on adding animation for Scrolling Into View, but for some crazy reason, they choose NOT to cover on how to program the Scroll Out Of View feature.
I’ve tried to recreate the Scroll Out Of View by following the same steps as the Scroll Into View but without susses.

Why wasn’t this covered in the Webflow Tutorial titled “Reveal Elements on Scroll - Webflow interactions and animations tutorial” i’ll never know.

@StuM


Here is my site Read-Only: beautifulproject2.webflow.io
(https://preview.webflow.com/preview/beautifulproject2?preview=a9625b74c329f22d7701be5a70fdc99e)


#2

Hi @FernXL

The webflow .io link isn’t working - can you check and update please?

Also, the best way to get assistance is to share what is called your read-only link. This is a view of the Designer and your settings - but it’s read only. So we can then take a close look at how you’ve got it setup and try solutions without affecting your actual project:


#3

I’m sorry @StuM, i just published the site and the url is working.


#4

Ok can see it now…

but I still need your read-only as per the link above - then I can see the settings :slightly_smiling_face:


#5

again, i’m sorry. I just learned how to find the read only link. i’m updating it now.


#6

ok, just updated the read-only link


#7

Cool - got it now :slightly_smiling_face:

Is it the ‘how we make brands thrive’ section?


#8

yes it is. and i’ve only applied it to the “Set A Target” column and the element is called “column Fade”


#9

Ok - let me know what you want that element to do when scrolled out of view. Is it essentially to reset it, so that the next time it comes into view, the same happens?


#10

i would like the element to revers the Scroll Into View animation.
I would like it to, after scroll into view, to move up -250px and opacity 0


#11

@StuM, you can feel free to add your own interaction to the Design A Solution column as an example.
if you can make that element enter the screen by fading in from the bottom as the Scroll Into View, then have that element exit the screen by fading up as the Scroll Out Of View - then i’ll revers engineer how you applied the Interaction to that element.

If you take a screen shot of your interaction panel, in confident that i’ll be able to incorporate it.


#12

Hi @FernXL

Ok, we are half way there!

What is happening, is when you ‘scroll out of view’ you are telling it to go up 250, and opacity 0%, but also to come back down again 0.5s later and opacity 100%. So basically when you scroll out of view and can’t see it - it is moving up and back down very quickly.

Also because the initial 0% opacity and down 250 is set to initial state, it’s not resetting itself when you scroll back up, only when the page is reloaded to it’s initial state.

I’m looking into it still, but hopefully that makes it a little clearer…


#13

thank you @StuM,

I only put the initial opacity at 0% and the initial state at 250 is because i followed the video tutorial on University.Webflow.io
university.webflow.com/article/reveal-elements-on-scroll
I have no idea why they did cover this aspect of Scroll Out Of View on this video, despite him mentioning it.


#14

Hi @FernXL

Ok, not quite the solution you wanted, and needs a little work on timings/fades, but here are the settings to make the scroll out of view instantly hide the element and move it down, then whether you are scrolling up or down, the element appears to rise upwards.

I’m really not sure we can make it ‘move up when scrolled down / move down when scrolled up’. This is because the interactions are based on ‘coming into view’, not which direction the mouse is scrolling. There may be others with a solution or workaround, but maybe this one will be ok anyway…

Sorry I couldn’t fix it 100% ! Hope this helps…


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

thank you for your time and effort @StuM.
i’m sorry that i had to burden your self with this.
i’m differently going to implement what you did and try to build on it.
i just really wish that they were more thorough with their “tutorial” videos. i mean really, how do you mention a interaction feature on one video but never make a video to cover it.

i guess i have to put that on the “wish list” and wait 6 months or more for a reply.

but again, thank you for your help.
maybe we’ll be the ones to figure it out then produce our own tutorial.