1 Trick To Creating Awesome Websites! (JS ANIMATIONS!)

good morning my gorgeous friends on the internet in today's episode we are going to be doing some fancy animations so are you tired of are you cheating are you looking at me on the screen there you're a little rascal are you tired of seeing websites that look like this and when you refresh the page it just loads up so boring incredibly boring and look at this idiot breaking the laptop and enjoying the sun so this is not where what we're gonna be making but we're gonna be making something like this so when you join you have nice text animations nice everything just super nice animations the presentation becomes nicer and whoosh there you go once more also what i want to say is i'm going to be making the react course i'm still working on it it's going to take 10 years confirmed by aliens this is the format that we're gonna be using for the course so let me know if you like it i like it i think it's more fun and more interactive it feels like we're not learning programming which is always a good thing okay okay let's stop let's let's head into the codes okay so okay my speaker is making weird sounds get the hell out of here okay so here's what we're going to be making let's head into our this is the another finish code but this is what we basically need okay i set up here an emptyapp.js i set up a simple style actually let me get rid of it all the code that we have here so get rid of everything and i just remove all the margins and paddings you know the good stuff and here in the index html i have two fonts that i installed so the first one is people and the second one is lobster okay so if you know you should know how to do this i'm not gonna teach you okay i'm gonna show you fine so you just need to go here to google fonts in the new search okay and then you add click and you select the style and you copy this okay you know how to do it and the second thing here so i just have my script app so this thing that's empty and i also have gsap which is the animation library that we're going to be using if you don't know how to add that just search gsab tutorial and find a better video than this one i'm joking so just gsab3 cdn okay just search that and the first one is going to be the one and then this is the one gsab min and just click on copy script tag and then you just paste that in here and that's it and i messed up the code oh my goodness okay um you can download the github which i linked with the finished code if you're superbly lazy uh but i highly recommend you to follow along for the funds i also have a random image here with a guy i don't know i don't know what this is but we have this as well okay so let's go here to our index.html and just click open live server okay and that's gonna open up this empty empty file here that we have wow fascination let me close up the other ones here there we go and let's get going okay so the first thing i'm gonna do is just write a bit of html code so go here and the body go into the body and in here all we're gonna do is do a simple landing page superbly simple we're gonna have a main tag and here we're gonna have a section that's called landing like that okay and here i'm just gonna have the logo which is gonna be h1 a float with an id of logo okay and i'm just going to throw in a url in here with an ally with a class of nav links and just a few allies i cannot speak home copy this two more times let's do contact and let's do a boot a boat okay super simple nothing too crazy okay let's scroll down here after the ul i'm just going to throw in our big text h2 big text like that and this is going to say stay upload okay this is that large text okay i got rid of it you're gonna see if you didn't see at the beginning okay just some super basic basic style uh text in here okay but after this what we need is those sliding things that you saw in the intro so what we're gonna do is just create a diff called intro like that and in this intro i'm gonna drop in a intro text okay so these are the text animations that we can see in here i'm just gonna have a h1 with a class of hide and in the h1 i'm gonna have a span with a class of text or something i don't know like that this is going to say creating innovation there we go i'm going to copy this h1 two more times one two like that and close this up for extra space this is gonna be four every day again this doesn't really matter every day people okay so again we're going to use this h1 to kind of hide the span that we have in here all right so these are going to pop out of the h1 and we're going to add some styling to it you're going to see how it goes okay and after all of this whole intro thing down after the intro i'm just gonna add a simple slider div and that's it okay super simple okay we can head into our style.css so let's take a look at our thing here this is what we currently have super boring nothing interesting let's head to our style and here i'm just gonna get the main and i'm gonna copy over that font family this hebrew thing okay now i'm just gonna get the landing the whole page i'm gonna add a min height to it 100 vh okay just adding some height and adding this thing to the background so background url and the url why you do this it's going to be hero jpeg okay so if we take a look it sucks ball we we see the first one and we see a second one there so we don't want that so we can say background size cover okay it's going to cover up the whole section for us like that and that's kind of nice perfect so now what i'm going to do is just add some padding 0 ram 5 rem what does this mean it means that i'm adding 0 top and bottom but i'm adding left and right so i'm gonna add a bit of padding here and a bit of padding there and a bit of padding for everybody okay now we can grab the nav i'm just gonna add the display flex justify content items let's do item center and justify content space between okay so when we add center it's going to center it and space between it's gonna it's not working why you do this uh nav did we add a nav in here no we didn't so make sure to go back here and wrap your ul inside a nav actually we can wrap everything so the h1 with the logo and the whole ul section here so this is how it should look nav with the h1 and the ul okay now we take a look and it works so we have a float there and we have our ul however even though we centered it here it doesn't have our nap does not have a height so we can just add a min height to this of like 10 vh just like that it doesn't work wow refresh what did we mess up okay so let's not justify items you have to say align items and then it drops it in the center this still looks like crap so let's fix that we can just grab the nav links which is the ul and just add a display flex to it which is going to put them side by side like that okay and then down here we can we're going to get rid of what the hell is that what did they press let's start okay never mind let's just do list style and here we're gonna say none so it's gonna get rid of those little balls that we all love okay so now we can hear down here okay what was that i'm sorry um we can go down here and say nav links li i'm just gonna add a bit of padding to the left 10 ram actually that's quite a lot 10 ram okay it spaces it out here wow amazing technologies font size 1.2 ram okay what did i do oh yeah i increased the size of this wow look at that it's not even clickable it's like we're faking websites fantastic what are we doing oh we're building the animation thing okay so next up so this is kind of done well actually let's take this this thing and just drop it in the middle there so we can do logo i'm going to copy over the font family like that lobster i'm going to change the font weight to lighter and the font size to 2 ram well that doesn't work why on the work oh it's okay it worked it's this one never mind what i want to do is also grab the big text so this is our big text right here but it's small so big text i'll tell you what else is big uh position absolute okay if we add position absolute we can move it around wherever we want so i'm going to say top 30 percent left 50 percent and now if we take a look it's here so it's not in the center i mean that's in the center if you take a look from the center however we have the text going here and it can go longer and longer so what we do is we take this whole text and we move this whole text back back back by 50 okay so even though it starts from the center it's not really centered so you can use the transform translate ah translate and we can say minus 50 on the x and y and the minus 30 on the top and bottom and look at that perfectly centered wow and we're gonna make a font size of five ram i'm gonna copy over i'm cheating the font family is going to be stolen there we go super big but it's i kind of want to get the color from the shoes here or from the water so it blends together so color i already know what this is so you can just say 61 6161 and hit save and look at that it blends together wow okay so we have our little landing crap here uh however we still need to add our animation okay so let's focus all on the animation so first of all we have to style it surprise okay so i'm gonna get this whole intro section here that contains pretty much everything besides the slider so i'm going to go down here i'm going to say intro and all i'm going to do to this is just add a background of black okay which is gonna make everything black but it doesn't why because it's down here see so what i want to do is cover this whole thing up and you can do that by adding a position fixed again adding position fixed you can move this around wherever you want so i can see top zero left zero top zero being up here and left zero being here so what i can do stretch this out with the width and the height to 100 to cover up the whole thing so with a 100 height 100 hit save and look at that it's all darkness just like our lives back to the code okay so now that everything is covered with darkness what we can do is add a display i basically what i want to do is position the text in the center so let's just get the text first of all let's go intro text color i don't know eyes blue some blue yeah like okay that's good and then font family let's do the what did we do not lobster the other one the hebrew let's copy the hebrew over right here okay and then we're gonna do a font size of tree ram okay can we see amazing um and now i just want to put it in the middle so to put it in the middle i'm just going to display this mother lover display flex justify content center align item center okay that should do the trick it did the trick i don't like this i think i'm gonna go just a little grayish a little bit of grayish color okay yeah that's good fantastic what do what else do we need to do oh okay so this is our intro that contains our text okay however we also made a slider that's outside of this div right here okay it's just the slider standing alone this is just for extra spiciness and effect so i'm just gonna take the slider we can kind of copy over everything actually so let's just copy over the intro down here change this to slider and i'm just going to pick a different color here so we can click kind of get a grayish blue here to match the website so something like that okay but position is still going to be fixed this is still good i'm just going to get rid of this display thing okay so it's like that that's too bright dark grayish a bit more that's good that's fine so now what i want to do is take this and just move it all the way down so we cannot see it transform translate y i'm going to take the y axis which is up and down i'm going to add 100 percent and 100 is going to move it down by a hundred percent so now we cannot see anything it's all darkness again so it's right down here so we can push it up whenever we want to and that's the whole css and index.html thank you very much so now the the javascript is extremely extremely simple we can head here and just use gsat for animation and gsap is such a fantastic tool it's the best animation tool actually you can quote me on that one because it's really fantastic okay so i'm going to say constil we're going to create a timeline and what the timeline allows us to do is to chain together multiple animations so we're going to see so to create a timeline we're gonna use the gsap library we're gonna say gsab.timeline okay and you can actually add a curly bracket in here and you can add defaults so just default like how long do you want each animation to happen if you want to so i can do a default like that and you need to add another pair of curly brackets in here so it's an object within an object well the only default actually is defaults with an s i'm going to add here is ease and this is going to be i don't know what this is it's called power one dot out that's the name and hit save okay so make sure you don't mess this up because it's very easy to mess it up i can confirm okay copy it did you copy it good perfect so we have our timeline now so now we can just select different items elements on in our index.html and we can kind of animate them the way we want so i'm going to grab the tl actually no let's stop i forgot one thing we need to hide the text here because right now it's showing right so if we go here to our style.css i almost forgot the most important detail is to hide the text what do we need to do okay so we can go here just let's go all the way down here we can grab the hide okay that's the h1 and we can just add a background to it background aqua close your eyes because it's gonna blast you okay so i'm gonna add black here as well to hide the text black okay fantastic now it still looks like this which is okay but we can get grab these pans so hide span i'm gonna add a transform translate why 100 so we're going to move down these pans now if you're going to take a look oh no it's not working they did not move down what is this madness well spans are in line so what we need to do is we need to add a display of inline block which allows us to mess around with the transform up and down okay so if we take a look now everything moved down however i do not want that i want these to be hidden behind the darkness so what we can do is just add an overflow hidden to all the h1s which is going to hide everything just like that perfect so hope that makes sense if it doesn't then i'm sorry okay so let's get back to our animations we can say tl we can use this timeline that we just made i can say two so where do i want the animation to go to the first argument here so add parentheses is going to be the element you want to animate in this case hide text is that what it's called no that's not what it's called uh it's called i mean what do they do it's just called text whatever okay let's just do text so the span okay we're grabbing the span here and that's the first argument comma the second argument is gonna be an object so add your curly brackets and here we're just gonna specify the animation we wanna do so i'm gonna say y parentheses quotes i want to move it back to zero percent hit save and i guess we also need to add the duration so how long do i want this to that last duration is gonna be let's do one second just write one okay so look at that everything just pops up magically wow however i want these to come up separately one by one how do we do that super simple gsap is just amazing you can just add a stagger and i can specify a time like 0.25 25 seconds so 250 milliseconds look at that how easy and wonderful that is so again what i'm talking about this timeline is if i add another tl2 basically after this animation finishes the next one is gonna start okay so that's the difference between just using gsap the two or something like that if you use a timeline they chain together i'm gonna grab the slider next comma here i'm gonna say y it's gonna go from it's going to go to minus 100 like this and the duration is going to be 1.5 seconds okay so if you remember we pushed it down 100 and now we're moving it back all the way to the top you're going to see take a look okay so that slider thing is going to do a little whoosh like that that's fantastic okay however i don't like that we cannot see the text so when you visit the page i can barely read that it already starts moving so i'm just gonna add a little delay here comma delay i'm gonna see 0.5 seconds like that okay let's take a look now okay so it stops a little bit which makes it nicer however this black darkness is still here so i want to push this up as well while this thing moves so let's go here uh tl2 i'm just gonna get the whole intro section comma y again i'm gonna move this to minus 100 comma duration let's do one second here and hit save let's take a look the problem is well this kind of has to wait for this to finish so this can start moving however we can get around that by adding a comma after the object here and just adding minus equals one so what this means is hey start one second faster okay and this basically since the duration here is 1.5 it's kind of gonna start at the same time so take a look now so they're kind of going at the same time now which is cool so i like this now again you can kind of mess around with this i can start this minus two okay so it starts two seconds faster okay so you can start basically going backwards here okay so i'm happy with that finally i'm just going to get i'm going to say tl from 2 this time what you can also do is specify a starting point and an ending point so basically these have an opacity of one to them however if i use from two i can grab the nav so nav make sure you don't add a dot here okay because it's not a class i can specify the first object to start from zero and then go to one so i can you can also do this which is fantastic okay comma let's also do a duration here comma duration one one okay let's see if that works so there we go and we can pretty much copy this and paste it down here and do the same thing with the big text big text this has a dot here because it's a class okay and there we go hit save let's take a look fantastic now i i'm gonna do these at the same time i don't want the delay here okay i don't want this to be delayed so again i can just go here at the end and add a comma minus equals one at the end just like that so these now start at the same time wow how about that fantastic we are innovating on this channel and they're just crazy hope you enjoyed this effect let me know what you think again links are going to be in the descriptions thanks so much for watching hope you're doing good hope everybody's good my health has been okay today i feel fantastic so i thought i'm gonna film the programming yesterday i didn't feel so good so i'm i'm getting acupuncture tomorrow can you imagine i'm gonna post on twitter or something to keep you updated to see how it goes also if you're unpatient to the react course well i have two others that you can check out the javascript and html course in the description you can get the whole bundle super cheap okay that's gonna be it for me i'm gonna check if my speakers still work take care

Channel: Dev Ed

Views: 240,421

Keywords: web development, javascript, programming, dev ed, developedbyed, js, javascript animations, learn javascript, gsap, learn web dev, web dev

Id: sN93DRYkCO8

Length: 26min 51sec (1611 seconds)

Published: Fri Sep 18 2020