Change Background Color on Scroll [Webflow Tutorial]

Hey Webflowers!
In this Webflow tutorial we're gonna create a scrolling interaction where the background changes color as you scroll from one point to another!
You can clone this project with all the interactions already set up here: webflow.com/website/backgroun...
----
If you'd like to see more Webflow content, you can subscribe to the channel: ruclips.net/user/AlVision?su...
--
Want to get in touch?
→ [e-mail]
--
Start using Webflow today: webflow.grsm.io/3424789
(this is an affiliate link, if you end up getting a subscription I'd get a tiny incentive at no extra cost to you)

[@excmax]

Finally great tutorial about this changing background with minimum effect in interactions! Brilliant!

[@charlimarieTV]

Thanks for these super clear instructions!! You made it feel so easy 😅

[@RD-jr8nv]

Awesome bro! I was surprised at how difficult this was to do when I tried to do it myself. Thankyou!

[@chamiko1802]

thanks Ai, after struglling with this interactions, I watch and follow your instruction and it works. Thank you so much

[@user-qx8li4dt5d]

Thank you so much for the extremely clear tutorial! everything worked perfectly thanks to your kind explanations.

[@CristianeSilva-xk5zz]

Worked perfectly for me! Thank you :)

[@ayotundeayodele3142]

Great tutorial! Exactly what I needed

[@sandraprunici9025]

Thank you for this tutorial! It is helpful and ease to understand!

[@anastasiiakhrapal2074]

WOW, super easy explanation. Thank you!

[@jakobmuller9073]

I come across webflow clonables where creators have used code to achieve that. Great to see a tutorial on how to do that natively. Please do more webflow native tutorials! Keep it up!

[@miltonsarkar5024]

Great tutorial bro. You made it ver simple to implement.

[@axolson]

This is awesome. Thank you!

[@LicMarceloBrum]

That's sweet man!! Thank you!!

[@jefferyirenkyi]

Your explanations are 💯

[@dharminpanchotiya8534]

Great Tutorial ❤️

[@topemeister3000]

Awesome stuff bro, cheers.

[@TheLaki1983]

Thanks for this tutorial it was helpful

[@olivertrace6378]

Awesome thanks so much for sharing

[@dariusshojaei5036]

Great video. Thanks.

[@user-fi6hl6zn1t]

thanks a lot man!

[@DeltaXMusic]

Great tutorial, looking forward to implementing this today. Thank you!

[@user-yb3no2ty7i]

good shit 👏

[@nicokuhne9528]

nice tutorial. Could you please reupload the clonable project? The link doesn't work anymore.

[@inakiwebtube]

More videos please! Lol - I have love hate relationship with webflow animations

[@Fubeman]

Not only was this exactly what I wanted, it gave me ideas on other upcoming projects. Well done. Well done.
P.S. The cloned project is no longer live. Can you repost? If not, I understand.

[@prasajamukti]

subscribed.

[@spagbowlsparmacheese629]

Really love the flow of your tutorials.. Learned so much. I'd love one on mask reveals when in view tute.

[@Chris-mr8qm]

nice tutorial, thx - When I duplicate the section, I make sure to duplicate the class, change the color but it does not work. the all page has the third color, any idea?

[@TheJelloash]

Hi, the link isn't working for the cloneable project??

[@lotem111]

Will this work with sections that aren't 100vh? I have some sections that are longer that

[@MrSebluff]

@AI Vision how can I apply the same style to a navbar background to apply the same effect?

[@rtabula]

When I preview my site, the interactions and everything work as expected. But when I'm in the designer, the 'background' div covers everything.. i.e. it covers the other 'section's outside of it's own 'section'. Am I doing something wrong? How can I fix this?

[@carmencumming2569]

Hi! I tried following this, and the easing works while scrolling down but not back up. (The color suddenly disappears/reappears rather than gradually changing over 0.8 seconds) Do you know why this is happening?

[@KateSullivan91]

I'm having the same problem. Did you ever find a solution?

[@ricndrs]

He’s so cute

[@mariovcis]

Hi! why you used a divi block named "section" instead of section?

[@AlVision]

Sections and containers that are native to Webflow aren’t as flexible as creating your own sections/containers. That’s why I prefer to create my own

[@rrasho24]

I tried doing this, and as soon as I made the background fixed I could no longer scroll my page. Mind you, I am trying to couple the scroll snap via CSS method you provided. Any help would be greatly appreciated.

[@ziyingtan7668]

Actually check the top comment in this video, ruclips.net/video/cKqFX-ZOeGQ/видео.html follow it step by step. I tried, it works. Think the comment there shares the same idea with AI Vision's method. Good luck!

[@ziyingtan7668]

You probably set the wrong div to fixed. I ran into the same problem. And my solution is to change the wrong fixed element back to relative position.

[@thornhillll]

Awesome video - thank you for showing how to do this. I am able to get this to work well on desktop, but it seems to trigger the color change very late on mobile - only once the content in the box hits the top of the viewport. Do you know how to make this function better on mobile devices as well?

[@RD-jr8nv]

Late, it may be a little labour intensive as I haven't tried but there is an option to select which devices you want this animation to show on from the 'trigger settings' sections in the interactions panel when you select 'scroll into view'. You could create separate animations for devices and just unselect 'desktop' or 'tablet' on the newly created animations. Hope this helps.

[@ziyingtan7668]

Not fully understand why you hide/show the background? When opacity is 0% you cannot see the background right?

[@AlVision]

I don’t know why but without hide/show, it bugs sometimes. It’s more of a safety mechanism to ensure it works every time

[@kevinmcgrath9109]

Your project link is broken