BG Color interaction starts dark?

Design help Animations & Interactions
1

Anyone know why the scroll up/down animation for changing the BG Color turns dark first, then it turns to the BG Color defined in the timed animation?

See how the transparent toolbar turns dark (unexpectedly) then white, as expected: https://preview.webflow.com/preview/idf-b?utm_medium=preview_link&utm_source=designer&utm_content=idf-b&preview=8f9682f47a9b8b4e682fb42ff63520f4&mode=preview

Also, how do I get the white background to turn transparent only after the user has scrolled all the way up (not midway down the page)?

Many thanks for the upcoming help!

2

Hi Carlos, welcome to the forum :slight_smile:

  1. Your initial Transparent color for the background is RGAB 0, 0, 0, 0 - which means it is a Black BG with 0 opacity. This makes the transition go from black to white and from opacity 0 to 1. Change your original color to RGBA 255, 255, 255, 0 (White with 0 opacity) and it will solve the problem :webflow_heart:

  2. You can use scroll interaction on the body and use percentage, or have a trigger. Start here:
    Interactions & animations course | Webflow University

2 Likes
3

Thank you Avivtech, that worked!