Change Background Color on Scroll [Webflow Tutorial]

hey welcome to this video and today we're talking about how to make a background color change as you scroll from section to section inside of web flow and the background behind this video is I have to do that for specific project and I thought it would be pretty simple to do but actually I found it much harder to create and so I started searching and trying I couldn't find a way until I found a first solution and the first solution explained that you could do the background color change once the page is scrolling but actually this one doesn't work because it leads to many issues so let's say you have a page that is ten section long right each section at the same size if you want to change the background color on let's say the fifth section to set up this interaction you would have to go to the interaction panel and then while strolling into view but because this interaction is set by percentage of the length of the page you would have to go to about 50% to change the color let's say for background start Y that I wanted to become black you would set from 50% the background color is white and maybe 52 percent the background has to turn black and then it works like this but the problem is it leads to several issues because let's say you want to add more sections to the page then this interaction doesn't work anymore it's not triggering at the fifth section like I initially wanted to but the background color change is going to keep happening at the 50 percent mark and I don't want to use that the solution unless it's a real last case scenario and so I kept on searching until I found the proper solution to this problem and now that's what I'm going to show in this video and what I'm going to do as well is I'm going to share this product in the description below where you can click it and it would lead you to workflow page that you can immediately clone inside of your workflow dashboard so you can immediately use it with everything with the interaction setup and all these things so without further ado let's jump straight into the video so before being able to create the animation I need to add a bit of content to the page to be able to showcase the animation so the first thing I'm going to do is to add a div block which I'm going to call it section and its width is going to be 100 view with and it's hard it's going to be 100 view height so it's taking 100% of the viewport it's this demo inside to flex Center and then Center so everything is centered now I can add another div lock inside which I'm going to call content and I'm going to set its position to relative and with the Z index of 1 now I can add some content inside of it and I'm going to add a heading which is going to be background color change I'm just going to change the font TT norms set it to black and then I'm just going to boost that up a bit so what I will do is just copy this and paste it so command C command V to just duplicate the page the the section and I'm going to go to the second one and I can start creating the background so what I have to do is to click on the section and I will add another div block inside of that section down right here and I'm going to call that background holder position will be set to relative with the Z index of 0 because the background if it's a background I want it I want everything to be in front of it so this one has to be as far behind as possible and I will add another D block inside of it so here's a quick shortcut instead of clicking on a plus icon and start searching for what you're looking for what flow has a neat little shortcut which is command e if you press command E is going to show you a search bar and you can immediately start typing inside of it so I'm going to add that block in that's sitting inside the background holder and I'm going to call that background and now its position I'm going to set that fixed so it stays fixed on the window and I'm going to set its position to full so it's taking the whole window and I will style this so let's add a background color why not some I don't like this color maybe like this yes subtle green right and now we're ready to set up the animation so all I have to do is to click that section which holds the background holder I'm going to click on that go to the interactions element trigger scroll into view start a new animation and then let's click the plus icon here and we're going to call that background change scroll in now we click on the background holder and we're going to first set its opacity to zero set us initial state and then the background holder I want to set it to hidden so it's hidden completely now we can start setting up the real animation so we're going to click on the plus icon hide show we set display to show and then the opacity to 100% and let's say a duration of maybe 0.8 seconds with a curve so this is done and now I just need to create the scroll out of view animation so let's start an animation and what I will do is I will just duplicate this one so you click on the three dots and click on duplicate click on that I'm just going to rename that stroll out and this is not necessary these two so I can delete them the Highland show will go at the end and the opacity I will set that to zero percent and then after it's set to 0% the background holder can be hidden become done and now what I want to do is to add an offset to the animation so what this means is that the animation will only work as the section has rolled 30% into the window and I'm going to set also a 30% out of you for this one and I'm going to set that to okay so let's start and so we can start viewing this so they start from here so it's white I start scrolling and then it turns to green show back up it turns back to white again so back down the screen perfect but the cool thing about the way of doing this is that all I can do is just click on this just duplicate it so command C command V I'm in there and then I can just change this one let's say I want another background color right I could just click on duplicate class and maybe I want this background to be background too and I'm going to change that to a nice blue color maybe like this and without creating a new interaction for every background color change you can use the same interaction that will do all the background color change for you so as you can see there is this little bolt that says that the interaction is already set up to this element because I duplicated initially the section that already add the interaction setup so now let's see how it works so it's white turns to green I keep on showing and now it's turning to blue so to back up going to back to green and then it's going back to white and so it's working smoothly and perfectly so that's pretty much it so if you want to add more backgrounds you can do so but all we have to do then is just to change the elements that are sitting inside the background holder it's going to work across all your sections that you will be creating so to recap to make sure that everything works what you have to do is to make sure that the content that you have inside of the page is actually placed on top of the background that's why you will see that the content here that I have placed as this person ratted but as index is one while the background holder as a z-index of zero so I made sure that the background holder is actually behind my content so when I start the animation I study interaction with the opacity from 0 to 100% it doesn't go on top because if the z-index is let's say for a background holder of 2 I'm going to showcase this if I start scrolling the animation you will see that the text is disappearing because the background actually is on top of the content so I have to switch that back to zero to make sure that when I start the animation the text is still on top and it's working perfectly so that's pretty much it for this tutorial if you found it helpful please click the thumbs up below and if you would like to see more videos and workflow videos in the future click the subscribe button because I'm new videos every single week see you guys soon

Channel: Al Vision

Views: 32,098

Keywords: Design, designer, startups, startup, Freelance, freelancer, freelancing, freelance designer, web design, web designer, web development, web developer, web development tools, freelance web developer, webflow, how to start freelancing, web design business, how to freelance, start freelancing, freelance web design, web design tutorial, website design, webflow background color transition, webflow background color, webflow background animation, webflow change background color on scroll

Id: zDgb7taW7Ok

Length: 8min 31sec (511 seconds)

Published: Fri Jul 03 2020