Building a page load animation in Webflow [Tutorial]

[Music] internets so it's time for another tutorial as with all tutorials what we're gonna do is break it down build it add animations and we're done all right so let's get into the breakdown so I chose this dribble shot by Corey Haggard it's called the unused concept so if you look down here he says an unused concept where we're cooking up with cooking up with a client this one would have been awesome but ultimately it was not used so yeah I saw this I was like this could totally have like some page load animations okay so just breaking it down here I can see these texts animating in in some simple way but most of the animation would happen here where it looks like a wireframe for an app like something like a little bit like a slack ish type of thing or something like that and so I can see these lines coming in these boxes all coming in all at different times with staggered load and whatnot and same thing with this so everything would come out everything would load in in a very fast animation but it's still enough to get you interested like ooh okay that was pretty cool and it makes it would make the user want to click on this play button right here and so yeah this play button probably could be a light box of a video or something I'm probably gonna put this tutorial video on here as well but yeah it doesn't seem too hard just a hero row with some animations and - come to think of it why not make it 3d kind of lay it lay flat on the on the page but angled in a way add some shadow I don't know maybe we can do that at the end all right let's get to it okay first thing I want to do is copy the colors so let me bring this back here there we go okay so first thing I wanna do is copy the colors I'm using colorzilla their page picker I mean color picker from the page so I'm just gonna choose something let's say right here I think I'm going to use a gradient so I'm just gonna use this as my starting color and how to put it in the swatches is just gonna choose from the typography paste in the hex save it as a global and we'll call it black shirt and there we go we got our first one and let's go ahead and get another color pick from a page and let's get this flat blue right here it's a lighter blue is that it looks like I'm not getting the right one yeah we can play around with it a little bit let's go ahead and put that global lighten that up a bit later on and we're using white and I think that's about it we'll just use those two colors and just go with it so let me put this back on my other screen and let's go let's move this body class because I don't need it and let's clean it up because I don't need extra CSS classes alright so this is just gonna be just a hero row we don't have to do anything else so let's just put a wrapper overall wrapper so we can Center everything and with this wrapper renu flexbox so we have this we're gonna call it wrapper and let's do flexbox and within it everything is going to be aligned vertically centered and I'm gonna push things let's see here yeah there's supposed to be on both sides on the left and right so this icon right here we'll do that and we'll set this to a 100 VH which is the viewport height I think we're good so far yeah okay so let's get that background color and that one that we chose there we go and alright so now that we have those right let's go ahead and put our first - div so this first dip is gonna go there the second one's gonna go there right and this first one is gonna have like that that content right the each one's and whatnot and then it's like a a small h1 and then a huge h2 I think so let's go ahead and do that small text first and well wait we need to set our font huh okay so let's go back to the body body all pages right here for typography no one likes Arial to default but all the kids are using monster erupt so let's do that Monserrat we're good let's use white for a default color there we go I think we're good alright so let's go ahead and put some text in we're gonna put h1 and all the H ones let's move set this to zero on the top and let's go to 20 on 20 2010 bottom padding 20 margin because we need a align yeah we'll need a line so this one uh we'll just say hello world what does that say welcome to Shh that's really small welcome to app and let's make it all caps make it super thin spring in that letter spacing to negative negative three pixels - yeah something like that I love how this C wraps around the o move typography alright let's make this super small let's go ten goosies okay let's go eleven in okay so maybe yeah default to zero should it be one let's leave that one yeah and this would be I always like to add by six when it comes to the line height oh no that's just me you do you oops oh whatever we can override it I'm gonna zero these out because the line if you look at it the line under this text has its own spacing so I'm just gonna make it its own later it's gonna make this blue okay you really can't see that so I'm changing this I'm gonna edit that global swatch what color is that blue a lighter even lighter a little bit more up too much right there okay I think that's the one we're gonna call it light blue all right cool so we fix that welcome to app alright next go ahead and bring another div block and this one we're just gonna call it horizontal rule okay and then the width of this I'm gonna guess it's like 75 50 50 and the height would be say 3 pixels and we'll set the background color to the light blue and let's move it away from its friends something like that yeah okay maybe 3 is too high maybe - there we go like that yeah cool ok next let's go ahead and add a each - right there and this one we're gonna stay white and this one says create and collaborate without limitations I can create my own line break but do I wanna because I want to make it responsive let's see here let's make this responsive so this div block right here that's wrapping all this stuff I'll deal with it later yeah listen let's deal with this first since where are you here all right so this should be all should be thin yeah I think it's thin and let's make this bigger yeah like that 42 42 all right next this let's do this out real quick I don't like the default padding's and margins and whatnot when it comes to basic HTML elements I like to I want my own control alright let's put a button so button tax what is the same um take the product tour there we go I'm gonna call this a button yeah let's go ahead and round out the corners to make it look like a button I think they're using 50 yeah something like that 50 pixels and let's go ahead and needs more space on the padding's something like that that looks like a pill yeah something like that go 24 that's cool and I notice that they're doing that old-school gradient thing with the button so yeah let's go ahead and do that super simple let's get this right here gradient pick from the color swatch and actually let's make this darker because it starts out dark I can flip it there flip it move and take back there we go can it be a little bit darker or is that too much uh wouldn't go like that yeah something like that yeah we can do that okay cool I'm liking the sides though yeah okay cool let's go ahead and move that away from each one see you by 40 yeah I think we're dead we're done with that I think so okay and this overall wrapper hmm actually it's not the wrapper that needs a padding if this needs a margin so I'm gonna do this and call it hero call one meaning column one push that away no let's go 100 and let's go ahead and make its max with let's say five fifty okay cool there we go 500 like that let's make this 50 instead cool so we have enough space for this guy right here all right so the contents done now we need to build out that cool wireframe type of thing and this is gonna take a lot of divs so let's get to it call this hero call - I'm not gonna style anything for now we'll just see where the more life takes us actually do this yeah I'll do that yeah we'll expand it and let's go ahead and make the height let's set a height to 40 VH like 60 VH okay cool let's go ahead and make this thing come to life inside of here let's do flexbox because if you can see here it's one two three four columns of stuff so we can easily make four columns of flexbox right here and actually no let's let's put another div inside of here because if I'm thinking that I want to do 3d this is gonna have that later on this is gonna have a child perspective to make everything all 3d ish so let's go ahead and bring in another div and we're gonna call this let's just call this wireframe and this is gonna be the height 100% of its parent this is gonna be flexbox we're gonna stretch yep everything there what I want was put in for these one two three four right so this is just go WUF - one for wireframe one right and this is why referring to wireframe three wireframe for so I think three should be expand did too should be expanded as well but it's actually say 20% maybe they all have to expand I want this to be like that let's remove all those stylists I'm gonna start all over again alright so this one right here let's make the width can I just do 30% okay and this one we're gonna make the width but this one this middle one needs to be like huge so this one will probably be like 5% yeah this one could be 15 so you got that got that and we can turn on x-ray so we can see can kinda tell I'll just turn it off for now alright so you have this this and this is gonna be the big one so we have 5 plus 15 is 20 so let's make this 50 and so we have 70 and this will be 30 oops % I think that 30% is way too big so maybe this could be 15% this could be 30 yep I like it so that's 15 5 okay so wf1 let's go ahead and color it the background is going to be this right here but let's go ahead and take it down a notch on the opacity just something like this like 25 cool wf2 let's do the same thing but it'll be 10 because it's a make it five there's a bit darker so let's see what we got yeah okay cool so this will also be the same so let me copy and paste this and then this last one right here will be the same yeah the same as this let's see how we're doing pretty good pretty good is this what we want I don't know about 25 go 10 I think 10 is better there you go keep it subtle keep it so all right and uh we'll see you wf1 actually the whole wireframe right here it meets to round out the corners my like 5 pixels I don't I don't see the rounding out so maybe it's because I need to do overflow:hidden there we go yep so overflow:hidden makes all the all the edges of all the child elements hidden and so this one actually the whole wireframe needs a border just go with one take this guy bring him down let's go 25 cool yeah 25 so let's save this right save that so that way I can make lines for all the other things boom swatches are the bomb there do the same thing here doing our borders boom I like it there we go so now that we got the columns done let's go ahead and do the second column it's just a it looks like words but it's just rectangles right so let's go ahead and do that I'm gonna have a lot of divs oh here we go first thing I want to do is I'm not gonna put the div so let's go ahead and put some padding so this padding let's give it ten on all sides all right put it did right here I'm gonna call this w dash to line line one actually no there's there's two in that one row so I think I have the Flex box this as well so I'm gonna call this top row okay and we're gonna flex it out and set them to both sides because I'm gonna put two divs inside one two like that so this first one is WF to line one and this is the width is probably gonna be like 30% no this one's a little bit bigger so see say 50% and this is wf2 line two and this one so this one's 15 gotta set this one to the same 20% and then the height looks like gonna be like three cuz the meeting needs to be a bit thick yeah all right so both of these are gonna have a background color of that right here but let's bring it down to like 50% no 50:50 good or should we do 40 I need to see it come on there we go I love how you can drag and then like the information on web flow goes away so you can actually see what you're doing something brighter okay 45 is good all right cool and copy and paste this let's go here and go yeah nope that don't look like it yeah maybe this one needs to be bigger let's say slowly 50 I'll bring it down like 37 yeah that makes more sense we could do that you know we can do that okay cool so that's done let's collapse this and then open it up again right there cool so that's done now we need the next row let's drag this right here and this one should be simple so what you could do is just random random widths for all of these things right so wf2 actually yeah line three right but let's move this push this down a bit from this top row give it more space so it looks like like a heading like 2008 like that yeah actually the whole thing let's do 15 instead of 10 yeah okay cool so this right here line three the height we're gonna keep the three pixels the width and random numbers just go for it any number that comes to your mind boom 77% God and we'll take this but we'll make it even darker this is something like 20% yeah that'll work cool and then all we can do is copy and paste it many times I don't know how many lines I'm not gonna count and let's push them all away from each other say three pixels four pixels away from each other yeah and so with each one instead of just doing all the ball of things I can just say duplicate class and we're gonna call this line four change the width to any number 59 cool and rinse and repeat if you want to fast-forward through this part 72 and this one pick a number every one 15 hey 9 yay like that yeah that's cool something like that and we can choose any numbers in one that's around a bit but yeah cool let's yeah oh yeah okay let's leave her like that and we're gonna animate all of those later okay so let's go here number three we're done with two let's go number three and was put in some padding we're gonna do 10 on the sides 15 on the top and bottom knowing that like soon and we're gonna make a card actually this needs to be flexed so let's flex that and let's do wrap children because what we're gonna do is we're gonna make three columns and it's gonna be like 33 percent for each width and then it's gonna wrap itself down once it goes over a hundred percent okay so let's go ahead and do the first one and we're gonna call it card oh wait first it's not slowly stretching there you go so this card those are rounded corners will do like to know let's go ahead and overflow oh no actually the card has text inside of it too okay so in the card we'll just do this right here so the base is gonna be a hundred divided by three percent and then I go and then inside the car but you have another div and this we're gonna call like we're gonna call image box but there's no real image inside of it and this is gonna have the radius of two and we're gonna set this to have a border and we're gonna make this height something like one whoa no sixty yeah that's 65 for fun you know and then insider they're gonna put some text oh wait no it's it's fake text it's just lines all right so let's get the line yeah let's just make another line here and we're just gonna call this w3 line one and it's not as dark as the other ones well let's see here the width of this let's make it display:inline cuz this one the width is probably gonna be like 89% and the height is three the background color we'll start with this and we'll go door probably like around 35 cool no no no let's make it 77 again yeah cool so that's the first line and let's go ahead and make two more lines why is there so much space hmm look like this oh because this is display:inline all right that's fine what am I gonna do okay so what I could do is go like this this is like three or four will go for four now on this image box needs to be away from the text - so we'll do be consistent with the fort ah nope don't trust myself let's go ahead and go six great yeah 8 is 6 ok cool and I do this what happens that's a weird that adds its own thing it only had or margin when I do that okay so how about this what if this was its own row so I'm gonna delete those to put in another box there and call it wf3 line row okay and that way I can flex and when I put new lines inside of here like that I'm just pasting that so let's duplicate this call it line two and this one is only going to be 30 32 percent and this one right here this is gonna be 1 2 3 and it's going to be let's go for teen fruit now thirty percent but it's you're moving it away from that other guy let's go with eight what does it look like pretty good but um now what this one could be longer so let's go eighty seven and this one can be listened to be way shorter how about twenty percent this one could be thirty I look good yeah let's go with it alright so let's go to the card right here and um yeah so if I copy and paste it multiple times so let's go nine times look at that cool now let's add some padding I'll be like that let's go five cool yeah cool you know maybe we can space these out of it no there we go cool we can start from the top middle down flexbox is so awesome can't wait for grid though that's gonna be a trip and this is not lining up at the top should it be oh the dude has like a input field at the top I didn't notice that just till now okay let's go ahead and fix that okay so if that's all doing that with the cards then I'm gonna have to add something else let's go ahead in whoa whoa whoa calm down okay right there all right this one we're gonna call it search thingy and this was gonna be a hundred percent there we go like that and the height let's go ahead and make it like 30 noise noise noise right so in here we're gonna have a search thingy let's go ahead and put a div walk in that and call it search input yeah so this search input is going to be dark color like that but the height is going to be a hundred percent of its parent and the width is only going to be a max of like 300 pixels or less something like that we're okay it's only okay let's just remove that and set the width to something like 35% there you go border-radius let's go to 10 what do we got the needs to look more like a pill no no slow 25 years there we go let's push everything up yeah no there we go that one works yeah like that alright so the search input I think needs to be darker it's like really dark actually that's still this dark yeah and then inside of this it's been moving in a bit don't you that's my Oh 25 let's leave it at this and see what happens with their life okay search input inside of here is another line to make it look like there's like placeholder text so we're call it placeholder text and the height let's make it 3 to be consistent and actually let's just remove the top and bottom because we can flex this and Center the vertical so if I yes yeah there we go so the width of this is going to be 50% and the background let's make it gonna make it dark actually no like this okay so now I can see what I'm playing with and I don't like the height so I'm going to go to search thingy parent say 20 anyone its it feels off because I'm using an odd number for this line I think that's good yeah yeah okay cool let's keep going this is done nice keep it going the right side it looks like discord or something like that or it has people's profiles or something like that mmm this line up the far right looks like this so why don't you do is just gonna copy this one face it in here ooh I forgot to add my own padding's so let's go 15 top and bottom 10 on the sides there we go cool think we can get away with that one um let's make this duplicate this one this will be WF for line 1 and we're gonna set the width to something like 67 yeah that's cool I guess yeah and it looks kind of cut off you know like if I did something like this where if I overflow on the wrapper and then and then I took this guy and I push them to the side using a transform like the phone like this so I think that's what I'll be doing I'll just cut it off just a tiny bit later on alright but let's just continue fixing this guy so let's put a div in here and this div is let's flex that as well flex all the things want it to the left and vertically centered because we're gonna have a circle and then two lines of pretend text so let's start with our circle we call this um avatar and when you're never your doing a circle you want to use the same number so probably like 50 25 25 and make the border radius 50 let's go ahead and get our color there we go something like that let's play around 45 yeah alright hold on this guy right here he needs to push away from that no probably fifteen yeah like that okay cool and yeah so this did block I don't want to call it Dave block I want to call it they'll be left for Avatar row okay alright so this avatar let's give it some margin of like five pixels and now let's go ahead and put in a div and inside that div I'm see this ya know inside that div is gonna be two lines in these two lines let's just copy this and paste it twice and I don't see it alright there we go so this first line right here it's a small percentage so maybe that's why so let's go ahead and duplicate this and then we're gonna call this WF for avatar line one let's make this like 100% whew I press ENTER really hard and nothing happened so how do I fix this I'm guessing it's this div block right here in Nice expand yeah there we go so let's call this avatar text call call them or something like that alright so we got that we need the text under it so let me get this let's move it up a bit I like three yeah so right here this line - no duplicated wa4 avatar the heck did I call it avatar line duplicate class w-4 avatar line two and this one was good 24% huh thanks 94 no it's very good 54 okay cool and how come you're not lined up guys know we're supposed to be vertically aligned that's why I want flexbox oh wait is there oh there it is boom that's what I want now the fun part copy paste just take this okay let me count it this time one two three four five six seven eight nine so he's nice so I one two three four five six seven eight nine play around with the bottom margin ten eight is eight like the magic number and I think we're good cool alright I think I've set it up are these too bright yeah let's do like that cool I think this is too wide now we can probably bring this in a sketch go 20 let's go 27 and we'll add three to this no no I want more 24 yeah yeah okay we'll keep going all right last thing let's go ahead and add a make this position:relative because what I'm gonna do is on top of this whole thing I want a play button I want to light a light box I'm gonna do is drag in a light box you know that's noon what is it there it is oh can we just put it right there nope that's wrong all right here cool it's like box link it's going to position:absolute we're gonna do a little trick where we go 50% 50% and then we need to do negative 50 negative 50 so the transforms make the 50 negative 50 percentage and now we have absolute Center this old-school way of positioning in the center before flexbox came out but because this is floating on top of everything you need to do the old-school way you can't flex box this can you well I could have flex well okay yeah let's do the Flex box stuff let's remove this I can actually do that yeah so this is not going to be position:absolute we're gonna put a wrapper uh there it is but that that and we're gonna call this light box wrapper and let's go ahead and we're going to position full and now we can light or there we go flex box so what I did again is this one has a position:absolute not the lightbox component and then I'm gonna set it to full and then I put that there okay so now I don't we're not using images at all this is all CSS alright so in here let's drag in div that way I can delete this image and we're gonna call this there's three elements there's the lighter circle and then the brighter circle and then a triangle for the play so let's do outer circle and again the border radius to make a circle 50% let's make the width 75 75 make the background this lighten it up a bit actually you know it's supposed to be it looks solid like it yeah you make it solid so something like this like that let me save that just for now and inside of this circle is another circle and what I can do is flex it right there yeah we'll say we'll say 50/50 for the radius 50% and we're doing let's go ahead and make this bright there we go okay so it's not supposed to be 50 55 65 60 okay yeah that's better cool last one ooh wait inner circle I feel and the last thing I wanna do is flex this again Center center and we're gonna call this play and how to make a play button lets do 50/50 again make the background though not the background we're gonna play with our borders so how to make a triangle and CSS very simple you get your main side which is this is our left side that's gonna be main so let's make this like 25 pixels white and then we get their top and do the same thing 25 but the color should be transparent okay and then do the same thing here 25 color nothing and there we go and now you can play around with stuff like if I make this say 15 make this 15 and get a trapezoid what if I make this 20 nope it doesn't look like a play button yet so what if I do something like 35 35 almost there okay there we go what looks like a play button 5 all right let's cheat this a bit and scale this down 22 5 3 there we go and it's not completely in the center so what I can do is also play the transforms and not rotate move it a bit there like 14 pixels with that centered something like that well there you go well there you go folks the build is done that wasn't too bad that was fun I know I can add like a logo at the top left I can do a menu bar at the top right and do some other stuff but I think let's just get to the fun stuff let's animate some stuff right let's go so the first thing when I animate is the text right here this should be simple and how we're going to animate it is let's go to this guy right here a trigger page-load when the page finishes loading what's going to happen let's do hero content let's name a hero content for our first timeline now point to this good guy and we're going to move him as initial stage so so once the page is loading all this coding everything what's it gonna look like before everything's done loading we're gonna make it go negative say 20 to 20 let's go 30s yeah so negative 30 and also its opacity will be 0 so at the end it's going to move back to its original spot and the opacity is gonna go back to 100 so we get this yes it looks very linear we'll add easing later but let's just get these things done first okay all right next horizontal rule let's just do the same thing move negative 30 opacity zero and move again to zero and to a passive you 100 so it looks like like that okay cool okay so they're happening at the same time I'm going to do staggered later using a delay right here but let's just do the basic stuff first so move negative 30 pasady zero and can I copy and paste you know I can so let's go ahead and move it like that maybe I should just do it for the plus sign up there all right so zero and opacity no not that I'm going I'll pass the 100 group them together last one move negative 30 opacity zero and I'm just going to have them here 100 here oh this so this is what they look like they all happen at the same time that's cool and all and there's no it just looks blessed okay so all of these let's sit the easing two out back so come let's see what it looks like so it has a little in you know it's like it's if you don't make sound effects while animating I don't know doesn't everyone alright so we have our easing done so this whole thing should delay by so if this one starts immediately let's have it delay by 0.5 and see what happens oh no that's too much Oh point two okay so let's see what happens okay how about point one yeah that's better group up with him no rip up with him there we go wait no okay well anyways these guys will be point two all right so now we got bum bum bum one two three okay and this button will do point three done I'm not easy huh cool all right now we just got to do the same thing here but because I don't want to squash all the animations into one giant timeline because you can see there's a lot elements to animate each one will have its own timeline okay so first thing I want to do is how am I gonna animate this I'm just thinking in my head um everything has to look like it's building itself you know kind of like sci-fi type of what you call fui which is like fantasy or futuristic user interface so something like that so maybe this right here else I can't click it because it's on top so I have to go here okay so I'm thinking this one I'm gonna slide in from the left so something like this you go to my transforms here so it's gonna yeah it's gonna slide in like this so that's gonna build in this could this could come from the left as well this right here this middle one maybe it'll come from the top so left left and then top going down yeah left left top going down and this one comes from the right so let's start with those three for now okay let's see where life takes us so do another page load start animation create a new one we're gonna call this wireframe bill okay so those three columns are going to be building itself so I have to go here select column one let's do the things let's move this over it doesn't have to do opacity because we have the overflow:hidden so let's move this actually you know let's not use pixels let's use percentages so find your percent of itself to the left and let's go ahead and add another up now let's choose the layer first I mean the element and so this one we're gonna move it oh these supposed to be initial state there we go so its initial state this one we're gonna move it negative 100 percent oh no oh yeah because it ends there let's go 120 so that's right there alright next Row 3 and the move and this one's gonna go negative 100 there we go that's what I want easy I want that in order okay next before move I want that in order come on now and this should go positive 100 percent and there we go all our left is with the light box wrapper and you know what this one let's go ahead and let's scale this to something like 1.5 right and the reason why is because I want it to go boom like that and let's opacity 0 cool alright so this one let's go ahead move it back to zero this one let's go ahead and move it back to zero percent oh wait not Y zero zero percent and this would be zero percent on the X there we go and this one's a y so it's going ad move y zero percent and number four it's going to add another step and this one's going to move on that at on the y yeah X yeah zero percent so everything goes back to where it was all right and so if we play it it all happens all at the same time of course we're gonna do a staggered load right so yeah it looks crappy right now but let's just keep going so this one right here let's set the opacity to 100 and then we're gonna go here and set the scale to one and so that way okay now we get to play with staggered load so for all of these though if this one let's see how long it takes let's let's do some easy stuff real quick let's go back to this page load okay this hero content so looks like it's taking 0.8 seconds to do this okay so we'll start at 0.7 okay so we'll do that delay at 0.7 so let's close this go to this one so this one all of these will start with the delay of 0.7 okay so watch what happens okay once this is done all that happens should it be faster let's go point five and see what happens maybe I have to present done no I guess I got to do it faster I'm bill 0.5 delay it's delay it point 2 there we go I want things to happen fast I'm gonna slow it down just a little bit more c35 there we go I like 3/5 okay point three five and so that one's so this one comes in first oh but the wireframe itself is still showing see this this box right here see it shows that the outline so I let's see see how it feels if we just leave it there and then let it grow itself yeah so we have that at three five this one let's delay that by ten four five four five this one by five this one six five and then these two will be seven five and done let's see oh yeah that like I think how can it still it's lame because of our easing all right it's out back the one we should use there well how elastic again close I always use court or Quint okay I'm feeling that one cool all right so that timeline is done right okay last one let's do this let's do this all these little lines and cards and avatars and whatnot let's go let's do it yeah here we go uh what I want to start with one there's nothing in it to a bunch of things in it so these lines right here I'm gonna do the same exact thing that I did here where it's just a staggered load and they all go up by 30 huh no 30 10 10 pixels let's try it so this first top row right here let's go ahead and page sugar page load start new one and all this wf2 and we're gonna move this this initial state is gonna be negative 210 I shouldn't be 15 foot 10 yeah let's go 10 all right to the next one and go negative 10 on the Y and again I think this is the part where you just fast Lord so we go to 10 10 this one be 1.1 hey 1.1 and then let's get 11 this one will be 1 point 2 it's gonna be worth it 1.15 and lastly 1.2 come on green cool yeah what do you think alright let's save that whoa okay we got through that next one should be easier should be right let's get row column three search thingy cards and cards galore let's just close all these search thingy so if this takes about a second we'll start this with this will start the delay with a second so let's go page load again start animation new one w3 search thingy again everything needs to move up and actually yeah this one will start up and go down it'll fade and then these cards here let's make them start from the left and fade to the frame to the right cool yeah okay so the move is going to be negative ten just like those and we'll set the opacity to zero now let's go make sure that's initial state and let's do the other things this card right here let's move come on order let's move it to that way negative fifty percent there pixels should be fifty or subtle kind of like let's go twenty and I don't want that outside of the box so let's go ahead and let me go back here go back to this styles do a pasadenian overflow:hidden so that way he doesn't get out of its box let's go back to you negative twenty right there and I'll pass it a zero Oh where you at alright and do the same for your friends yeah search thingy there we go cool I'm using my keyboard to traverse through the tree so let's move it did I say negative 20 on the X there you go and let's hope a city that to zero and let's go ahead and click this car go its sibling move negative 20 please do that on the right and on the Y I'll pass it oh my I might get confused because the name of the cards so I got to do this right alright let's go ahead and open x1 okay I don't want that close it okay okay next one there we go let's go ahead and move negative 20 opacity 0 okay its sibling and do the same thing how many times I'm gonna click on the Y first you go move ha ha got it that time opacity okay it's in order from the top down so this is good move capacity maybe I'll cut these parts out move I did it again pasady last one move opacity there we go what okay whatever cool is that zero alright so if I press play nothing happens obviously okay so why you there okay so let's do the first of first one the search thingy we're going to move it back to zero and set the opacity to 100 and this is gonna delay of say let's delay of like 87 okay and so look like this so while that's finishing up this one comes in okay all right so search thing is done this first card in this right here so let's select them both I'm going to press the plus and say move to zero and set the opacity to 100 and those are gonna have a delay of 0.75 okay much easier I should have did it this way yeah because I learned that I'm gonna probably cut that others stuff all right anyways that's the next card okay so next card that one go ahead move zero and set the opacity to 100 so both of you 28 it's the next card yeah it was much easier now opacity and move so it's gonna be a delay of 5 wait no no I messed up undo undo everything okay this one I hear no I need the next part over that one let's just do it at the end move there we go zero opacity 100 okay and this is gonna go with these but she's gonna have a delay is much easier okay I'm learning let's go the next one next row is that the last one okay cool that so let's go all the way to the end and we're gonna go move to zero set the opacity to 100 and movies with this but add point five nine seconds point nine there we go that's the one I want passing in hundred move to zero both of you and their point five see what it looks like so far yeah everything's linear I'm Elaine penile Aggie but it'll look good on the published version because everything's just code so it's not really loading anything all right there we go move opacity okay next one no not that card not that one nope that one move zero opacity 100 goes in here delay one not there yet not there yet there we are yeah so just a lot of rinse and repeating and I guess that's what animation is right not background color there we go almost there and pass any 100 no move you there one alright last one I'm excited to see what its gonna look like move zero opacity 100 send that up there alright done let's see oh yeah my easing I got too excited like all the things easing out back cool so smooth oh man everything's and so that's why I think about like people who make like the Iron Man HUD and all those features of UI stuff like they have so many animations and you especially for Hollywood movies you hardly see or can hardly take the time to appreciate quick shout-out to hugs and gooeys comm if you mean to this far in this video quick shout out to them hugs and gooeys comm HUD s a nd GUI is calm it's just so fascinating to me you should check that site out a lot of good stuff there a lot of good what you got yeah motion graphics those people take time they take a ton of time and this is just like what an hour to to our build they take days so that's why I really appreciate those artists to come up with that kind of stuff nutty alright last one we're there we're there we can make it WOF for this should be easier and not many ok probably 10 10 elements all right same number elements here we can do it let's go let's go finish finish strong initial States okay let's because it's on the right let's make everything come up for the right so the move we're going to move it to the right say 20 pixels okay and we're going to set the opacity to zero okay let's take this line go it's child I mean sibling there you go move 20 and opacity no pasady zero all right we got this and the passages zero Oh already did that one next one there you go move 20 pasady zero next one move 20 don't a city zero no oh yeah I forgot about the collapse I can do this mm-hmm save it so much more space I should have done that earlier 2000 past city zero I meant did I do the same thing delete but okay okay I'm supposed to go to the next one there we go move twenty opacity:0 next one move twenty opacity:0 next one move twenty opacity:0 next a CT no opacity zero every everyone wondered how many times you've clicked in your whole life alright move twenty zero that's done so everything should be gone if I go like this nothing should load on the right that's what I want let's go so this line right here I'm going to move to zero and set the opacity to 100 the delay if this starts at like 0.75 let's just start this at 1 okay let's just see what happens cool start that at 1 all right next one line yeah I can just do that move 0 opacity 100 bring these in here delay point zero five and just keep going oh my gosh I see the finish line oh it's so close just got to keep the head in the game right 1:02 uh uh head in the game I'm opacity bring that up there and there you go next one move zero opacity got to say it out loud so you remember which step you're on there you go - okay Oh drag it down actually yeah collapse boom move zero opacity 100 moves it up nope move it up there you go point five next one move zero opacity move it up three three oh my god still there okay move zero opacity oh yeah movies hook right there anymore okay this has to be the last one right right does that look like nine circles opacity bring that up for Oh one more okay move zero opacity move that up any more no more I think that's it oh wait I mean the evening I always do that I get too excited okay let's go that like that easing now back do it publish it and see what it looks like um what if I added JavaScript what's the JavaScript to reload JavaScript reload page should be simple okay cool try it yourself there you go I'll just take this and so when you click this let's just rename this to reload animation and so like this let's go have some custom code script and then this is just on clicked my function alright we'll just name it reload reload animation and then all it is is just what yeah on click Save actually I think it'd be easier just to go like this it's dot button so I can just go to my custom code and go like choose jakey's jQuery and just be like dot and button not on click on click function reload close that out and yeah I should do it there save publish oh man that was a build cool alright I think that's it for this video what I'll do is I'll post it on a post a link in the description below where you can actually play around with this you can clone it on your own account build on top of it and do whatever you want with it it's up to you reverse engineer but yeah have fun with it and I hope you liked this tutorial ish practice lesson thing whatever you want to call it but thank you so much for watching leave a comment below if you have any comments like it subscribe hit that Bell and as always make the web beautiful see ya [Music]

Channel: pixelgeek

Views: 5,922

Keywords: animation, pixelgeek, web design, webflow tutorial, UX, web design tutorial, graphic design, UI, webflow, tutorial, pixel geek, user experience, web dev, web development, interactions, user interface, webflow animation, webflow tutorial 2018

Id: pKhRY4i4p_c

Length: 77min 19sec (4639 seconds)

Published: Mon Jul 09 2018