I am building a website where the right half of the site pans layers out of view as you scroll. I am trying to figure out, though, how to only have the layers pan back in when you scroll up. See what I am talking about here: http://topherdigital.webflow.io/ (scroll down the page, then scroll back up - then down again). The first scroll down is what I want the entire experience to look like, then reversed when you scroll back up.
I would like the right half to simply pan back in when you scroll up rather than panning in and out.
I just came up with a way to solve this problem. Here is how you can accomplish this, for anyone who might come across this thread in the future:
The first thing you need to know is that hidden elements do not trigger interactions. With this knowledge, you can add hidden divs that serve as “flags” all down your page that are 1x1 pixel and have no background color. You can create interactions that, when a visible div that comes after your hidden “flag” scrolls off screen, makes your flag visible. You can then apply a “Scroll Into View” interaction to trigger on that specific flag. When a user of your website scrolls down past the flag, it becomes visible - then when they scroll back up only then does it trigger an interaction. Once the flag has been scrolled back into view, make sure to toggle it to be hidden once again (this can occur at the end of whatever interaction you were hoping to trigger when the user scrolls up - just add it as the last action). Through this approach you can effectively create separate Scroll Into View and Scroll Out of View interactions for users scrolling up your page vs. down your page.
This was a hack/trick at the time, and I have not tested it since… it may have changed! What are you working on? Maybe we can come up with another solution.
I need detect scorlling up and scorlling down event on webflow designer.
Can you help me on that?
I mean, how to find out user scroll up or scroll down event?
Please help me on that.