Animate Page Color on Scroll in Webflow

in this video we'll create a scroll interaction that changes the page color using web flow variables and custom attributes so let's open our variables and we'll create a couple color variables let's add one for colorbackground our main site background we'll have one of color SL text for our main font color let's add a color SL button background and let's also add in a color SLB button text now we can also add variables for any other elements we need and we'll need to recreate these same variable names when inside our different themes so we could have a light theme on our site we'll have a light/ background let's add another for light SL text we'll have one for light SLB button background and let's add one for light slash button text and in light mode our site background will be this we can set our font color to this this will be our button background and this can be our button text and we need to create these for any other themes we have like a brand theme or a dark theme so I'll have a dark s background um we'll have a dark SL text we'll have one for dark SLB button background and then we'll also have a dark button text and in dark mode this can be our site background this can be our font color this can be our button background and this can be button text now we'll never apply these light or dark variables directly PL elements we're always going to reference them through these color variables so if our site is a light mode by default we could grab this color background and set it to the light background the color text could be light text we could link up the button background to the light version and button text to the light version as well so once we have that set we can apply these color variables to our different elements so if we head over to the body go to body all pages we can set the background to color back background we can set the text to color text and then we might want to grab this whole Navar and set its background to the color background as well and we might want to grab maybe this button element and set its background to the color button background and set its font color to color button text so once we have that set there's some code we can add in and I'll leave a link to it in the description below these first three lines here these Scripts we can add to our site settings before body or for a single page site it can go in page settings before body tag here so we'll paste that in and save then for this next set of code we'll want to add it inside an embed on our page and we can make that an embed a component if it's a multi-page site so I have this custom code embed I'll just paste this in here so what this is doing is saying anytime we have an element theme attribute with a value of one we're going to update our color variables like color background to be light background instead color text to be light text and then whenever element theme two is set the color variables will switch to the dark versions instead and we can add however many themes we'd like so maybe we have a color theme three that switches color background to maybe a brand background instead and we can add those in here so the advantage to this is some of our Pages we might want to be light mode by default some pages we might want to be dark we could grab this body and we can add a custom attribute to it we can say element theme and if we set one that's light mode if we set two that'll be dark so we can switch the theme on the body like so now for certain elements like this card regardless of what the theme is on the body we always want the card to be dark because it's on top of a dark image so we can apply a background color to it of color background instead of just relying on the body's background color and we can apply a font color to it of color text and by default these are just the light mode colors but then we can grab our card and we can give it this element theme two so that it's always in a dark theme regardless of what the theme is on the body so if we grab our whole body and switch that to dark this is not affecting the card whatsoever just the stuff outside of the card so now that we have that set when we scroll into certain sections we might want to change the theme on the body what we can do is grab maybe this blog section here and I'll add an attribute to it of animate body 2 and then we can pass in the theme we want to animate it to mine will be theme one light theme in this case so when we scroll into the section it'll animate to light and when we scroll back out it will reverse back to whatever the previous theme was now when we scroll past this section the whole body will stay light so we might want this next section to switch the body back to dark so to do that we can pass in animate body 2 and we'll switch it to to animate back to dark now these are going to animate whenever the top of the section reaches 50% from top of screen so right when the section reaches the center I find that's a good point for these types of animations but you can always customize it from the embed that's percent from Top is 50 right now we can also customize the duration of the animation the Gap ease and also a minwidth by default this runs on every single breakpoint but if we only want it to run on desktop we could say run on screen sizes that are at least 992 uh pixels wide and that way below tablet it would clear out and at desktop it would animate so I'll just leave this to all breakpoints and we can go ahead and save and publish this and we can check it out so basically our whole page should be dark by default because of that attribute we put on the body we could set the default to whatever we'd like whenever the blog section comes into view it should animate to light if we scroll back up it should just reverse back to whatever the previous color was when we go past the body and this next section comes in it should animate to dark and that's the top of section reached 50% from top of screen now on larger screen sizes we may find um here that whenever we scroll here this last section because it's not tall enough never reaches 50% from top of screen that's okay that's totally accounted for whenever this last section is fully in view that's when the animation will switch and whenever it's SCS back out of you it'll just reverse back so it still works pretty well on large screens so that wraps up how to create these color scroll interactions in webflow

Channel: Timothy Ricks

Views: 12,787

Keywords: webflow, how to, tutorial, lesson, advanced, pro, course, building, design, development, interactions, animations, css, javascript, code, custom code, wizard, awards, interactive

Id: ECCEDxNTs7c

Length: 6min 39sec (399 seconds)

Published: Sat Dec 16 2023