Change background and text colour of entire page on scroll. Like this: https://roamdigital.com/client-stories/backr

I want to change the background and text colour of the entire page on scroll.

Like this: Backr. A platform supporting Australian entrepreneurship


Here is my public share link: LINK
(how to access public share link)

Scroll into view ix2 → section background for both in states and out states. Your example looks like it has a little VH offset and/or delay offset.

Experiment with ix2 section background and you’ll achieve same results. Good luck!

Did you work out how to do this?

Hi! I think I figured out how to do this with Webflow’s scrolling interactions. There are two ways that I think would work, depending on whether you want the color to change throughout the whole page or just in one section. For the whole page, you would use the ‘while page is scrolling’ page interaction. For just a single section, you could use the ‘while scrolling in view’ interaction. The actual animation will be the same either way (although some of the value might have to be adjusted to get the look you’re going for). In the animation, the only thing that we need to do is change the background color of the body or section. You could play with the percentage values and colors. I made a version with four different colors and set each to start at 25% intervals. This seemed to work pretty well. The website given actually looks like it is using a ‘scroll into view’ trigger with the animation on the ‘when scrolled out of view’ option. Then it is just a green to white background animation. I hope this helps!
Thanks!
Jordan