â–Ľ
Streaming live at 10am (PST)

Is it possible to set "Scroll Into View" and "Scroll Out of View" to only trigger when scrolling in a certain direction (up or down)?

Design help Animations & Interactions
#1

Hello,

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.

Here is my preview link: https://preview.webflow.com/preview/topherdigital?preview=3d5d5e68f3c73b934d17c6838217aa3c

Any thoughts?

Best,
Chris Travers

1 Like
#2

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.

4 Likes
#3

Hi @ctrav,

This looks like a great solution - could be just what I am looking for.

Thanks!

Darren

#4

For me even a display: none; div does trigger the interaction.

2 Likes
#5

Does this still work? All of my objects set to Display: None are still triggering interactions.

#6

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.