Streaming live at 10am (PST)

While Page is Scrolling Animation is breaking with different screen sizes

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:

Here is my site Read-Only: [LINK][1]

Here is the published page:


The best solution for this would be to give each section a Scroll Into View animation that targets the navbar. Then, just adjust the offset of each section by a pixel number instead of a percentage. Also, to make your life way easier instead of targeting every single nav link and to change color on every single animation, you can just select one nav link and then select Class: All elements with this class. And it will change the color of each nav link because they all have the class Nav Buttons Desktop:

Here is a link that can give you a better understanding on how to use the Scroll Into View feature:

If you have any more questions let me know!