I’ve created an animation for all my websites pages to change the navbar background and button colors while scrolling to make it more visible. For example, when the navbar is on top of a white section, the buttons are black and the background is white. When the navbar is on top of a black section, the buttons are grey and the background is black. It looks great when I am editing on my monitor, but if I look at the page on my laptop, the animation gets messed up because the percentages of the screen are different. I’ve tried changing the animation to While Scrolling In View, but I experience the same problem. Does anyone have any ideas about how I can fix this?
The home page linked below shows the While Page is Scrolling
This page shows individual While Scrolling in View: http://practice-website-09d944.webflow.io/services/landing-page-design
Here is my site Read-Only: [LINK]
Here is the published page: http://practice-website-09d944.webflow.io/