Change color based on scroll location


Pretty new to webflow. I’m trying to find out the best way to get my progress bar/navigation text on the left to change color when scrolling on specific areas of the page. (In example, when in the “discover” section, the navigation should turn orange and when outside of that boundary, it should return back to black)

I notice that when I try to do this the color changes halfway through scrolling and I want it to stay the same color (orange when in boundary) until it reaches the point where it’s outside of that.

Is there anyway to accomplish this?

Here is my share link: Link

Hi. You want to change the colors without any transition?

Either that option or there could be a transition exactly before reaching the boundary I set, but I don’t want it to happen way earlier than expected. I was expecting the color to transition closer to 35%, not by 27%. So I’m wondering how I can solve that.

Example (See screenshot): The color has already transitioned into black before it even reached the 35% that I set.

In general (Like any animation app).
You can use the same value for frame 1 and frame 2.

frame 1 (0%) bg: red

frame 2: (45%) bg: red

No you don’t have any transition.

frame 3: (45.00001%) - bg: blue

On scroll the colors changed without transition (There is a transition but it is so short that the user does not notice it).

Sum: works with doubles - 3 colors example:

0% red
45% red

45%.01% blue
85% blue

85.01% brown
100% brown