Page Animations With Javascript Tutorial

good morning my gorgeous friends on the internet how you doing today in this episode we're gonna develop the small little landing page as you can see here that has these these small little slick animations to it so we're gonna use gzip for this and it's gonna be fairly simple so I highly recommend you to do it with me all right and the reason we're doing this is to give a bit more personality to your websites and you can kind of configure it the way you want and this is probably one of the main reasons I also got into front-end web development I love animations I love showing and expressing different things on a website and how I got into animations well my mom used to throw these flip-flops at my head when I was a child so she used to throw and I was really fascinated by that motion you know I talked and before we get going let me know down in the comments if you use anything for animations what libraries do you use or if you use any okay everybody let's get started so let's go here and the first thing we're gonna do is you're gonna go to Google and this is a searching platform it's very cool it's very new and we're gonna search for CDN tween Macs all right this is where we're gonna use for animation so we max is used to animating things and we're gonna use timeline max to chain together multiple animations okay cool let's get the tween max here you can click copy or you can click copy script tag and let's go back here we can create an index.html generate the page hit save alright I don't know what this is so let's stop that and we can just drop it in here boom perfect let's get these so we have twee max let's also get the timeline max where are you timeline max this is the one we're gonna get so copy script tag boom boo-boom place it in here drop it perfect and we can also create our own script tag so i'm gonna create script source and we can drop our own ab dodgy s that's how we're gonna call it basic boom boom boom alright we have everything we need all the scripts perfect we can also do a style dot CSS we can link it up here by saying link tab dot slash style dot CSS well everything up and running perfect let's drop in some HTML and our body yeah okay what we're gonna do very simple we're just gonna have a header here a nav inside and I'm I'm gonna if you want these the specific image I'm gonna use and I also have a hamburger there you can get it off my patreon I'm gonna leave a link in the description but to be honest you can also just use any image you want or a hamburger you're gonna find the ton on the Internet but that's the one I'm gonna use now so I have an image folder here I'm gonna copy over hit paste and just the burger basically and this nice car alright this is my future car after I have a hundred thousand subscribers okay so let's let's insert these in here first of all I'm gonna do H three let's do an ID of logo alright I'm just gonna add some text here vacation because who has time to create logos nobody okay an image and this is where I'm gonna drop the hamburger so burger and alt is gonna be hamburger let's also add the class to this of hamburger I'm getting hungry okay that's all we need in here so we have our header and outside of the nav I'm gonna create actually a section for like the big image okay so this is where we're gonna place the bus this is one gonna be just a section here and I'm gonna add a take another class here up here oh and here is where we're gonna drop our image so image image dream vacation okay that's what we're gonna have and also now that we're not I don't think we need a class for this to be honest that's all we're gonna have and let's also add a h1 here which is gonna be our headline and this is gonna say something like dream big okay okay so that's that's pretty much all we need and actually outside of everything here we're gonna create a slider and what this is gonna be is we're gonna kind of transition the background image on top of everything so I'm gonna keep this separate because I want to animate it on top of everything in here okay so this is all we need it's safe and let's tell this sucker up let's open up with live server and this is what we have so far all right nothing too interesting and actually you know what we cannot see that Burger so let's get this background showing up from the start so the slider the slider thing so let's just remove some basic styling here with margin:0 padding:0 and box-sizing boiler box okay just some basic styling remover removal we can get the slider the one I'm talking about and for this one we can just do so if you want to place anything any bit on top of something you can just add a position:absolute to this and then you can kind of move it wherever you want I'm gonna move it top zero so the top of the screen and left zero which is gonna stick to the left of the screen and we can add width 100% and height 100 VH which is gonna be full screen and we can do a background of light blue so we can see what's going on okay so this is what we have as you can see it's just a blue thing on top of here now the problem is this is kind of covering everything up so if you want to move something to the back so everything else pops up in the front you can use Z index and the negative value is gonna put it to the back so if I say minus one that's gonna drop it to the back because everything is zero just like my life okay so as you can see we also have the hamburgers showing up there very very cool we're gonna change this up we're gonna add a linear gravy into this let's do it now linear gradient I use two colors for this we can say to left this is the the direction I want to go in and it's be a seven four five three and the second one we're gonna use not dollars we're gonna use the one a nine eight four okay it's safe no save and let's add one here so we can see so this is kind of what I was going for kind of took the color is off of this so it kind of fits everything nicely alright let's add minus one back here oops there we go ok let's kind of style this thing up here d-nev and we can do it with flexbox or CSS grid you know what let's do CSS great because people want people like that so we can just grab nav and we can save display grid and we can create some columns you can say grid template columns alright I want to have margin 10% 1 fr 1 or 10% all right let's take a look so now if we take a look we have 10% 1 fr 1 fr and 10% here ok and what I want to do is move this here and then this here at the end ok let's also give this a bit of height so we can say men heights of like 10 vh I want to make sure it's at least that big ok that's good and let's add a color white so everything is white and yep that's good too and we can just move these around so I can grab the logo and if I want to move it here so where the hamburger is I can just say crit column and then I can start counting so if we take a look here again this is where the line starts so 1 2 3 4 5 so if I want this to be here I can say 1 from 2 to 3 ok so that's what we're gonna do we're gonna say front 2 to 3 alright let's also give a font size of 24 pixels and hit save and this is automatically gonna jump here because it's the next element and it's just gonna drop it into the next column so everything was fine everything just works perfectly to move everything in the center here all we have to do is go up to the nav and say a line items and we can say Center there we go perfect now I want to move this to the end here so we can just grab the hamburger and we can say justify selves and and we can move that individually to the end there we go that's all we need everything is done everything is perfect let's get that hero class actually let's get that section so let's work with this big image here because it's it's not nice if you remember we had a section here with a class of hero and the images and a text so let's get the hero four in the section first and I'm just gonna add a display flex to this all right I'm gonna add the height of PP VH make it a bit smaller all right like that and then I'm gonna you know before we move on let's get the hero image and make it hero image and make it a width of 100% and a height of 1% so it kind of sticks to our container so we can see what's going on okay so this is what we have here in the section we add the display flex and the reason why I did this is because I kind of want to move it here in the center we can do justify Content Center whole line item Center and I believe that's all we need now this doesn't work yet because we also have to do the hero all right and if we make it smaller or something like 60% and let's add the width of 100% now you're gonna see that it kind of shows up and centers everything so let's do a V here you're gonna see what's going on so this is our big section here let's add a background color and I want you to see and visualize how everything works here so this is our actual section and now that we added a justify content center and a line item center it drops it perfectly in the center here and what we're styling here with the image is actually this hero so if I change this to hundreds you're gonna see it scratches and if I add a hundred percent here it's gonna take up that sections height all right so let's drop everything back to the way it was a hundred here like that and yeah that's all we need here we can get rid of this it's safe and now this doesn't look that good so what we can do is go to the hero image and we can say object fit cover not contain cover hit save and as you can see kind of zooms everything in so it doesn't look that stretched okay let's also move the headline here somewhere so we can get the headline and we can say position:absolute again we can kind of move it wherever we want this I'm gonna say top 70% you can kind of experiment with this I'm gonna do it like that I'm gonna do a crazy font size of like a hundred pixels and I'm gonna transform translate this to - 20 % and - 70 % it's save let's take a look so this is where it is very good and what we're gonna do is say color white like that and let's add a left of 10% here like that and we're kind of gonna move this and position it a different way in just a bit all right let's not worry too much about this for now okay that's what we need what we can do we can make this darker if we want so this image here and a simple way you can do that is you can do hero after like that and you can just add content of nothing this is kind of like generating another div out of nowhere this is what this does the after and we can just drop in the background of oops let me close this like so we can do a background of black and we can do a width of 100% height of 100% position:absolute all right so as you can see just generates another one of these things and we can drop it right on top left zero top zero and as you can see it covers everything now because it's relative to the document we want this to be relative to that actual hero image so what you can do is you can go back to the hero here and you can see position relative all right so now that's gonna be relative to that so it's gonna stick to this like that and what you can do is just lower the opacity here on this black thing 0.3 something like that and as you can see you have more contrast but edie our text is also like that we want this to pop out more one way what can we do well remember that we can move something to the front with z-index what we can do that to the headline we can say z-index and just give it a big value like three and now it pops up on top so there we go that's what we have alright that's kind of it with the CSS we're not gonna go like you can make this as nice as you want but for now it's fine let's go into the animations because hey that's what we came for in the first place so let's go into here fj yes and we can say Const hero and let's just select everything on the screen document query selector and we can say hero all right let's get let's copy this multiple times here I'm gonna get the slider alright so the background image it's gonna be slider we're gonna get the logo now be careful this is gonna be an ID here so ID of logo we're gonna do hamburger this is gonna be hamburger and lastly we're gonna do headline and this is gonna be also headline all right we have everything selected it's perfect so what we can do is we can create a time line by saying TL equals new timeline max make sure this is lowercase here I messed this up multiple times and now with this time line max we can chain in together multiple animations so what you can do is you just say DL DL like that and you can do dot from two you can define the elements you want to animate so this is gonna be here oh that's the first one all right and which is basically the container of the image so here oh then the duration so one second I'm gonna do and then it's gonna be an object with the starting position of your animation so we're how do you want the animation to start from and here you can do something like height I wanted to start from 0% all right and then what you can do add the comma and I want it to end at height 80% make sure to add these and quotes as well Thanks so all right that's all we need we can hit save and take a look this is what we have now the reason we're doing it with height I mean 10 technically you can do this with with scale like the reason that I'm not doing it with scaling scaling would be more performant as an animation but if you mess around with scale you're gonna get that squishy thing going on so transform translate not translate scale and we can scale on the y-axis of like 0.5 so you're gonna get that that squishiness going on here so if you're gonna animate this from like 0 to like 0.2 it's gonna look kind of funny what you can do if you want I mean you could add an after and before element and you can like transform and translate those from here from the middle outwards like that all right there like a few tricks you can do this but to be honest it takes so much effort that I don't think it's worth it it's worth that small little performance boost over something so simple so what we're gonna do is just stick to the height because hey simplicity always wins okay so we have this height and we can also add an easing if we want to this so and the second object here you can specify an ease and you can say power there's a lot of these you can check out the documentation ease and out all right system one I used as you can see it kinda does it in a bit different way now perfect so that's the first one we're gonna do now if you want to add multiple animations to this make sure you don't close this so leave this remove the last line here and you can just do from two again okay if you want to just do two and you don't want to specify a starting point if you can just do two like that but we're gonna do from - okay the second thing I'm gonna do is again the hero and I'm gonna do one let's do one point two seconds on this I'm gonna do wet now of 100% so this is my starting point and the ending point is gonna be wet of 80% and what we can do is we can just copy this ease from here to here like that hit save let's take a look what we have and take a look since we have that cover added on the image we have this nice weird little transition going on there with the image kind of I don't know it looks very cool I like it take a look so that's what we have perfect let's do another one let's do the this sliding in so from - and what we can do is a slider let's do one point two seconds what we want to do is move the X so this is kind of like transform translate X alright and jiseop world we can move this to - 100% which is gonna move it off screen and now to move it back all we have to do say x 0 % alright and we can just copy this function again from here to here it's saved let's take a look now as you can see everything kind of just goes in sequence but what if I wanted to start this animation a bit sooner so the background I mean this can work to you like if you like this you can keep it like this whatever floats your boat but if you want to start this sooner what you can do is you can exit the second object you can add a comma here and you can specify in pair of quotes you can say - equals and the number of seconds it should start sooner so if I want this to start exactly like this one I can just look at the timer on the previous animation and copy that so one point - I can say - one point - and that's gonna start exactly when this starts shrinking with the width all right so right when this animation starts that's when this is gonna start as well so I like that because I don't have to wait 10 hours for the animation to finish so I'm actually a big fan of doing it like this now you can do smaller ones if you want if you if you really want to be fancy you can do these the logo and the hamburger so we can go down here we can say from - logo and we can do a 0.5 so something a bit more nuanced opacity and we can just mess around with the opacity I can say zero we can also do X move it 30 and then when the animation finishes what we can do is say opacity one and we can say X back to zero okay and we can delay this as well by adding - equals let's say 0.5 seconds it's save as you can see it kind of slides in there a bit like that and we can do that to the hamburger - so we can just copy everything here make sure to remove again the last one there just paste this and replace this with a hamburger and then we can delay this a bit more let's say one second hit save there we go or maybe let's do 0.5 on this as well all right there we go very subtle just a little bit of animation there you can also do it on this text if you want you get it it's kind of the same thing we can copy/paste this we can just the headline hit save so that's something you want you can do that as well but that's it quite simple quite powerful I love gzip it's so simple and fun to work with and yeah you can come up with some very creative stuff so there we go thank you for joining me on this little adventure again a quick update I'm gonna post a discussion type video in the coming days on my patreon so if you remember that's coming if you want to join me and support me you can do that with patreon and I'll try to also give you back some some additional videos and all the source files and things of that sort I'm also planning additional tutorials for exclusive tutorials to post there as well so if you want to see more definitely check out the patreon in the description and that's it we're close to a hundred thousand which is crazy I want to thank you all again I feel like I'm doing this every time that I'm just so grateful for all of your support so thank you very much hey hey let me know if you want to see more of these animation type videos because there are probably one of the most fun things to do I don't know I just like visual things a lot so yeah that's it I am I'm also I also need to do magic okay I forgot to do magic so that's coming in the next episode as well alright everybody have a wonderful wonderful day

Channel: Dev Ed

Views: 431,936

Keywords: javascript tutorial, animation tutorial, page transition tutorial, page animation, javascript page animation, javascript animation, javascript animation tutorial, javascript animation effects, javascript animation tutorial for beginners, javascript animation effects for website, javascript animation library, page transition effect, page transition animation, css animations, page animations, javascript animations, javascript transitions, dev ed, javascript gsap

Id: AKmoccuRiN4

Length: 23min 9sec (1389 seconds)

Published: Wed Jul 17 2019