How to Change the Background Color on Scroll with Webflow - Animation Tutorial

what's up youtube my name is marvin aziz i'm a freelance developer and yesterday for the web to the flow website i created an animation on scroll to actually change the background color of a section today i want to show you how easy it actually is to create such an animation using webflow's interaction triggers so without further ado let's jump right into it [Music] so as you can see i'm currently in the um webflow designer and i've got a really basic setup right here so i've got these cards floating in as soon as you scroll down right with a header a paragraph and a button a little gradient in the background and an image down here so that we can actually do something with a background color right so um right now this is looking fine but in order for you to have a really immersive experience you could try to change the background color on scroll so that's what we're going to do now is i'm going to actually select that section which is wrapping all those elements up until the last cut okay so i'm grabbing that section and from there on i'm going to press h to get into the interactions you can also go to the top right corner and click on the interactions icon i'm going to create a new element trigger and i want it to have the trigger while scrolling in view okay so i'm gonna check off those smaller screen sizes for now and i want to play a scroll animation so you can check the animation boundaries appear it tells you where the animation is going to start and where it's going to end right but we're going to leave it for now and create a new animation okay click on that little plus icon i'm going to call that animate background color and i am going to i still have that section selected right and i'm gonna click that plus icon click on background color and now it added two keyframes so i'm choosing the first one and for now it's gonna be a white background right but you have to think about [Music] the section is already in the screen right so up until i actually start to um scroll down i want it to be oops oops oops right there we go before i'm scrolling i still want it to be a white background right as soon as i start scrolling maybe somewhere i wanted to start to get into something darker keep being dark dark dark and as soon as i scroll out of the last card i wanted to go back to white again okay so that's what we're going to do now actually you can check where the animation is supposed to start right so it tells me right here it's at 27 so 20 27 of the element so the section is currently in view it's currently visible so i want my background color to stay white maybe a bit afterwards and then i want it to go dark mode okay so i'm going to choose a dark color maybe actually black yeah that's looking better and then i'm going to duplicate that one put it somewhere here and i'm firstly going to preview it okay okay it's dark actually not now actually here i wanted to um get back to white again okay so i'm gonna duplicate that white one and put it down here all right so let's see how this actually looks oh wrong button all right there we go let's see how this actually looks looking good oh yeah it's getting dark see now you have this immersive effect right you you can only concentrate on the on the content which is right in front of you the background noise is gone boom boom boom it's a nice effect and that was a bit too early for me right so now what you have is and you can play around with it like crazy it's getting dark beautiful beautiful now it's getting it's lighting up again all right what you can actually do because one thing that's annoying i can see the the border up here and i can see the border down here and i don't like that so um let's actually change the the target to be the body so i'm gonna click on the body and i'm going to do that for all of the keyframes all right let's see how that actually looks light dark it's getting dark it's getting dark it's still being dark it's dark it's getting light again right and now you don't have any borders in there it's just dark for a moment and it lights up again okay so the next step would actually be to um not only change the background color as soon as you scroll but also maybe change the background color of that card right so that would maybe be interesting so now that we have our basic animation right here what i'd like to do is actually um get into some advanced stuff right so this animation is not supposed to be dependent on the the main section but on the individual individual card and the way we are going to do it is um for now i'm simply going to add some margin down here so that the card is not fully visible in the beginning and i'm going to select that wrapper the card wrapper and press h i want to create a new interaction i'm going to choose this time to have it scroll into view all right i want to start a new animation and i'm going to call it um card scroll in and from there i actually want the text to start with a opacity of zero that set it to the initial state also i'd like the paragraph to start initially with zero opacity and the button two push it up there so that that's the initial state also i'm going to add a move animation so i want it to start 25 pixels below same for the button okay still the initial state so i'm going to select all of them and duplicate it all right so now i'm going to choose an ease for the easing put it to 0.6 maybe a bit of delay 0.2 and then i'm going to set the opacity of all of them to 100 percent and also i'm going to put the movement to 0 pixels i don't want the animation to start as soon as the card is visible at a zero percent all right i want to give it us a little bit of breathing time so i'm gonna create an offset for about let's say 40 so only if i have like 40 of the card visible it's going to start the animation and then we're going to choose an animation on scroll out of the view and for that i'm simply going to actually duplicate the animation we just created and change it up a little bit scroll out i'm going to remove all those initial states we don't need them for now and i want the opacity of all of them to go back to zero without delay uh zero duration the movement should like go back to 25 pixels pixels and there's no offset right so as soon as the card is out of the view it immediately um goes back to the initial state hopefully let's let's see for that i'm going to choose the class so this interaction is going to apply to all classes with the same the same to all elements with the same class right so i've got three elements called sec call wrapper in here so this is supposed to be my call class let's see how this actually looks nothing to see here yes yes yes see easy and honestly like as i scroll out it's going immediately back to the effect which is great because i don't have to apply it to all the elements i like i don't have to create an animation to all of the elements i simply can use the the class and choose the choose to have the animation for the class only right easy as that i really hope you enjoyed this video if you have any questions let me know in the comments or any feedback constructive please write it down in the comments and hit that like and subscribe button to support the channel i'd love to make some more videos on all things webflow and see you in the next one [Music]

Channel: Marvin Aziz

Views: 3,743

Keywords: webflow, webflow hover, jquery

Id: DDavYZ_M9Z8

Length: 11min 56sec (716 seconds)

Published: Sat Apr 09 2022