"Page while Scrolling" not working properly for me

Design help Animations & Interactions
1

Read Only Link: Here
Staging Link: Here

The Problem
I’m working on a couple of website interactions that rely on the “while page is scrolling” trigger.

I chose this approach because the webpage’s behavior isn’t dependent on the browser’s height, making it more precise across different browser sizes.

However, I’m noticing that the interaction still seems tied to the browser window’s height. This issue is affecting both the “navbar” interaction and the “layout 485 page scroll,” and I can’t figure out why.

The Proof
You can see the issue by dragging the browser window up and down on this page:

  1. Navbar Interaction: After the navbar changes color, dragging the window up causes the navbar to change color again. This shouldn’t happen because, even though the window size changes, the webpage size stays the same. The animation state should remain consistent.
  2. Layout 485 (Relume): Similarly, dragging the window up and down changes the numbers on the left-hand side. Again, this shouldn’t affect the interaction since the page size remains constant.

Where I’ve Seen This Work
I’ve tested a similar interaction (here) that works perfectly. Dragging the browser window up and down after the navbar changes color has no issues—it behaves consistently across all browser heights.

Any advice or insights into what might be causing my issue would be greatly appreciated!

2

Hi James,

You might have overlooked adding a custom height, especially for layout 485. Can you check that out?

3

"Hi Diane,

Thanks for getting back to me!

I’m not quite sure what you mean by adding a custom height.
Correct me if I’m wrong, but wouldn’t a custom height for a section or div not interfere with a page-based interaction?"

5

A secondary problem but the website between preview in Webflow Designer and staging is different.

Everything is smaller, but if everything is smaller, the webpage should be smaller which shouldn’t affect the interaction I’m trying to design. I’d like to solve the initial problem first before trying to solve this.