Changing background color with scroll

Design help Layout & Design
1

Hi. I’m trying to change the background color of my website as I scroll. I found a cloneable site that does this but it only has 5 sections and I need 7. I tried duplicating the sections and just changing the bg wrap color but it changes the color on both the cloned and original sections. Does anyone have a solution so that I can make more sections? Thanks!

2

When posting please:

  1. Share your project’s Read-Only link AND live site’s Published link
  • The read-only link is a special url generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the <your-site>.webflow.io subdomain where you can view the live site with custom code running. It is important to share this link, as custom code does not run in the Designer.
  1. Upload as many screen shots/screen cast videos as possible to help others help you faster
  2. Add a description of what you’re trying to achieve, and/or post a link to a working example of what you’re trying to achieve
  3. Reply to users by tagging using the @ sign followed by their forum username like this: @username
3

Hi. Go to interactions > page trigger > while page is scrolling > create new animation > then click on the operation you want, in this case it’s “bg color”, then you can set it to where you want your page to change color, eg. at 15% of the total page height you can set it change color. then you can adjust the smoothing to alter how rapidly and smoothly the change occurs.
I hope this was helpful.

1 Like
4

Thank you! That worked.

1 Like