Scroll interaction works only once

Hi,

I have a single-page website with several sections, each one is 100VH so it takes the whole screen. I also have a fixed navigation on the top.

I want to change navigation background when a specific section is being shown. I’ve tried using Interactions (Scroll Into View), but it seems that when scrolling through the page, all triggers are fired only once. That is, scrolling back and forth changes the background color once.


Here is my public share link and read-only link
(how to access public share link)

Yeah @shpoont, I see what you’re working with. Yes that scroll into works once on “Into View”, but you don’t have an “Out of view”. That would allow a color change.

Are trying to use 2 colors or how many?

Thing is that slides are of different colors and the “Out of view” depends on direction.

Sure, but you can change the “Out of View” color back to another color, or a different one.

Sorry, I didn’t explain it properly. Consider 4 sections - red, green, blue and yellow. Since blue is surrounded by two different colors, it’s impossible to use “Out of View”, because it should work differently depending on scroll direction.

Ah I see, it’s a little confusing, but I think I’m with ya. So in that case, Blue would get it’s own interaction to change by itself. It will activate at the same time as the others, but they would be independent. Just layer interactions.

Do all the normal ones, except blue. Then you can see your options (me as well). Go ahead and start with the colors.

But I understand you’re dilemma, I’m 100% confident there’s a way to do this. But I can only see you’re site, I can’t see your mind… :slight_smile:

I know this is a pretty late answer but if anyone come to this thread the solution is to add a dummy animation on “scrolled out of view” (ex set opacity to 100%)

4 Likes

my man! saved the day for me!

1 Like

Actually, the dummy animation can be just empty as well. Thanks for the tip!

2 Likes