Simple Moving Gradient Background (in Webflow)

hey what's up today we're gonna build something that is pretty spicy it's just moving colors uh I made this a long time ago and it's got over a thousand colognes now so I guess it's pretty popular so why don't we go ahead and build it uh I think it'll be it'll be even better this time Let's uh as always we got the agenda if you're pretty comfortable with some of the earlier stuff just check the description below I'll have all the time stamps in there anyways intro and demo already done it's my favorite part we'll first go into webflow as always we start from a blank project so we're going to build everything from scratch and then I'm going to hop into the webflow interaction it's not uh not too fancy so we'll just walk through that and then some stuff you'll learn we're going to go through a full screen responsive layout you'll see this thing takes up the full screen there and what am I a Mac screen so I mean you could size this however you want so we'll get into absolute positioning and just a little bit of flexbox we'll do viewport width and viewport height units in this one we'll look at webflow interaction design and we'll be using the CSS backdrop filters which are in beta and just filters in general all right let's get into it got a completely blank project here gonna go ahead I'm not even going to style the body right now let's drop a div I always start with page wrapper set this to overflow hidden so that something grows outside the width of the box it doesn't give us horizontal scroll or anything like that okay let's keep moving I'm just going to call this section it's going to get a mid height of 100 viewport Heights and we'll set the width to 100 percent and then see here let's just go ahead and start adding our circles I'm going to call this circle just looking to see this will be 90 viewport widths and 90 viewport widths sorry 90 viewport height and I'm going to let's see what else do we want this is going to have absolute position I'm not going to set this yet I'll tell you why in a minute gonna give it a background color I don't have the colors ready for you yet 100 viewport was for the radius so I got this CSS gradient.io website and I just built this little gradient I think it's probably the same as the Instagram colors to be honest but this is where I'm going to grab the colors from so the first one we'll just give this color and then I think that's all we probably want to do for one Circle let's keep that there so let's duplicate this they're all just going to be right on top of each other since they're positioned absolute the first one we'll call this purple and give it top left second one what's our next color red call this red and send it to the top right let's grab that red color go away background color all right that's red now next find we want is orange oh let's give it a combo class first we got red this one we'll call Orange and we'll send this to the bottom right the last one we'll call Yellow bottom left go get our color okay and I'm gonna position these just a little bit let's go negative 25 to the left negative 25 To The Top the red one which is our top right we're going to say negative 25 percent negative 25 percent the right is going to be negative 25 from the right and from the bottom and the yellow will be negative 25 negative 25 percent okay that's looking good there now we want to just add a little bit of throw a card on top of it and so for Section I'm going to make this relative and I'm gonna give it Flex Center Center and then this div block that's going to be the card that kind of where is it this kind of uh see-through card Effect that we have going on here so I don't call this card and we'll give this 90 import widths and 90 V Port height actually let's set that to min just because we don't want to be hard-coding Heights whoops that's viewport Heights and this we're going to set to Absolute so it just sits right in the middle there now let's give it a background color we'll go plain white sorry that's text color let's go like white and it's behind everything so we'll give it a z index of I don't know five so now it's on top and we'll give it um yeah 20 pixels border radius and let's do 40. looks a bit nicer and this background color I'm going to bring the opacity down something like 30. let's see how that looks give it a one pixel border make that just oops one picks of order just a bit off-white and then let's go ahead and give that the backdrop filter we'll give it a blur hypixels let's go Max it out 20 pixels you could go more but that's what we're gonna do for now and just throw some text in here so again we're going to flex this Center and to make this size we'll give it a size of five viewport widths line height 1.3 looks good let's bring this up a little bit just and change it away from default cool it's looking kind of nice and you know these circles I'm going to give a little bit of their own blur effect so I don't want to select the combo class so we'll click up here and hearing two selectors and we'll edit just a circle class and I'm going to add a blur to this under filters so that it applies to all of them and we'll give that 20 as well I think I want a little more actually let's give that 40. yeah look at that I like that better okay that's really everything that we need to do in the setup don't think uh just want to make sure we're good to go there let's just hop right into the animation if uh I missed something then we'll Discover it during the animation essentially what we're going to do is just we're just going to grow um one corner to we'll use the scale and we'll scale that to like from 1 to 1.5 and then the two in the opposite Corners well the one in the opposite corner we're going to scale up as well but to not as big as the as the opposite corner and then the adjacent to we're going to scale those down so you'll kind of get this flowing effect and we'll just do scale at first and then after that we'll apply some moves to really um add that extra level of spice okay let's go to interactions we're going to do a page trigger on page load uh when page finishes loading is what we want so let's start an animation and we'll call this BG move okay and first thing we're going to do is we're just going to apply we'll just set an initial state of one for all of them and this is for scale and notice I'm doing selected element right now if I change this to class it's going to say Circle purple so it's not no matter if you do selected or class right now it's going to apply it to whichever one since we put those combo classes on everything and then scale is going to be one and the last one scale one okay let's go ahead and duplicate all these I'm holding down option just going to drag these down here that did not work as I wanted it to it's not working I think it's because they're set as initial state so let me set those as initial State again and I'll just do it by hand and we'll see if it works the next round so what I want to do is I want to scale this up to say 1.5 and then the one across from it I'm going to scale this to 1.2 let's see get bigger and then the two adjacents I'm going to scale those down so scale those to like 0.7 and same with the yellow scale to 0.7 and now we're going to select them all I want this to take three seconds and I'm going to do something like a in out sign I think we can play with that later if we want so I'm going to select them all again and just repeat the same process I'm not sure why this drag and dropping isn't working for me um it's kind of a bummer but that's okay we can just redo this whole thing maybe if I copy paste no not working let's oh I copied a circle delete it oh come on wetflow save delete what did I do which one did I copy looks like the first one okay see and now I need to make sure I set that back so let's just run it real quick once you see everything's kind of moving cool all right and so the next time we're gonna we're gonna grow the red one to 1.5 the yellow one to 1.2 the purple one to point seven and the orange one to 0.7 so let's grab the red one which is the one that we're scaling up 1.5 the one across from it the yellow one we're going to scale that to 1.2 and purple we're going to scale to 0.7 and orange we're going to scale to 0.7 as well let's take all these well we'll do it at the end the the timings now we're going to do same thing with orange so just speed me up if uh since we're doing the same thing really on everyone purple is going to go to 1.2 red is going to go to 0.7 yellow is going to go to 0.7 and now yellow is the last one we're going to scale that to 1.5 which means purple is going to 0.7 orange is going to 0.7 and the red is going to go to 1.2 all right and now something we can do don't select these ones these are all our initial States we want these all to take three seconds and we want them all to be in outside Loop and preview look at that the colors are moving there's still a little bit left to be desired uh I mean you could stop there it looks pretty cool but I will show you oh wait I want to make sure that we're not snapping back so let's watch it here so now we're going to jump down here jump down here jump down here okay oh shoot I meant to do it here you'll see I want to show you how it resets here yellow's getting small all right the yellow is going to be the big one now and we want it to Loop right yeah it's open it looks good okay I guess I don't need to show you what I wanted to show you watch it one more time cool something we can do to add a little bit more to this is that as something's growing we'll also go ahead and move it so you'll get much more of a bit of a wavy effect I guess and let's start with purple so when purple's getting big let's move you notice since the Z index is like the yellow is on top when purple's getting big we'll kind of move the yellow one out of the way that's that's what our strategy will be so this is where the purple one's moving so we're going to move the yellow sorry the purple one is scaling so we're going to move the yellow one and let's move it down 20 percent and left I don't know negative 10 percent and then we will move it back to zero percent zero percent on the next one and any move again we want that to take three seconds and we'll just make that on ease this one's going to take three seconds set it on ease and so in this one the red red circle is growing so what we can move the orange one out of the way so there's orange purple growing red growing so move it's just negative 10 percent actually we want to move it to the right so it'll be positive 10 and down so 10 percent set this on an ease and then in the next one we want to reset that move so back to zero and back to zero and I'm just going to go through and change the durations at the end here and then so we have purple growing red growing orange growing here orange growing I think what I want to do let's just watch it and see I'm gonna set them all to three seconds you kind of gotta just watch and adjust this how you think it's going you can see that yellow kind of gets way more out of the way now which is nice okay we haven't done any I think you know I think that's looking pretty good pretty happy with how that's turning out all right that's it thanks for watching if this helps or you think it's cool like And subscribe I will make it cloneable so you can go and pick away at it and see and let's just double check we kind of checked on everything here so let's strike these out and I'm gonna pop up another video for you to watch uh if I got some other stuff coming so click on this next video Whatever YouTube thinks you should watch is what it's going to tell you to watch thanks again bye

Channel: Web Bae

Views: 9,522

Keywords: gradient, webflow, animation

Id: gnODWXmucy0

Length: 16min 7sec (967 seconds)

Published: Mon Sep 19 2022