Steps & Description
Copy and paste the code above in your before </body> tag.
Customise the code to fit your design:
- Change the starting and transition colours (currently set from transparent to white)
- Change the offset (currently set at 100px)
- Change the class targeted to match yours (currently .header)
In the designer set a background color transition to the targeted header.
Tips & Notes
By using the above code instead of the native Webflow scroll animation, every page will behave the same, rather than being relative to the page length.