Fullpage Animations With Javascript Tutorial

hello my gorgeous friends on the Internet in this episode we are gonna do JavaScript yes animations yes full page Jay s with G's app and everything else oh so as you can see here what we're gonna do is we're gonna scroll a bit and it's gonna also scroll for us to the next section on the page which is also gonna trigger some animations so sit back enjoy relax and the code will be posted on github anyway so you can be lazy you can just sit there and eat your popcorn at 12 in the morning and let's get going okay let's get going so we have an empty file here as always empty as in our lives and the first thing we're gonna do is just make an index.html for beginners out there this is where you put the the text and everything that you see on the page but you probably already know this if you've been watching me so now take a look at this shift and exclamation point you get this thing which is an exclamation point and then you hit tab and boom boom boom auto generates everything for you okay so the title of this is gonna be full page because it's a full page animation okay so we're gonna go to the body touch my body and oh let's not open that up first because those are the libraries that we're gonna use and we're just gonna drop some basic code and here now we're gonna create a few sections and we're gonna use full page jas so the way that works is in the body the way you do it is you're gonna create a div like this and then you're gonna give it an ID of full-page like this I'm gonna do all lowercase okay and in here we're gonna add some sections and these are basically these scrollable parts so each section if you scroll once it's gonna scroll all the way to the other section okay so we're gonna create a few sections here I'm gonna create a section and I'm also gonna give it a class of section like this and s1 so slide one or section one and just to make everything clear okay and actually we're gonna duplicate this a few more times to create more but let's just add the h1 in here and we're gonna call this home decoration like that okay now we can grab everything yes I'm using the mouths I don't know all the shortcuts in the world and we're gonna go down here and duplicate this three more times okay I'm gonna change the second one to s2 and we're gonna rename this to something like different styles yeah and in here we are also gonna have I think let's just put in a description so we're gonna create a div with a class of description like this and here I'm just gonna drop in two paragraphs so P lorem 20 tab and then we're gonna do another P tag with some random text so let's do another P tag with lorem 10 and the hit tab and it's also automatically gonna generate some filler text for us okay so we have the section two with h1 and a div with some paragraphs okay and finally what I want to have down here is some images now these images will be provided in the link in the description so you can click on that and get the images but you can use anything you want but if you want to follow exactly what I did and this tutorial then you can use this so I'm just gonna copy paste it over again it's gonna be there so don't worry and in here what you're gonna do is a image right below the description tag description div apologies and this one is gonna have a source of image and actually let me just quickly show you what I have in here so we have a chair and another chair and another chair with different colors if you're the same size and everything and the reason there is pace here is because it has a shadow as well so this one the blue one has this shadow and we have a couch here which is gonna be our front page a lamp which I never use but hey if you want to use it that's here and we have a sofa and which is kind of like a couch anyway well anyway we're just gonna add the chairs in here the order will matter because one of them has shadow and that's the last one we want to add so if you want to do the shadow less or if you don't care you can just do we're gonna put the second one first and then I'm gonna duplicate this two more times I'm gonna put let's put the third one and the first one okay I just had fair here chair chair chair okay chair and chair the alt okay and then we're also gonna add a class here and the class is gonna be chair and c1 so chair one and we actually we might not need this we so let's just do chair chair chair chair okay sounds good to me perfect okay so we have this section do we should we add anything else yeah I think we're gonna leave it like this and here and we're not gonna do this part I just want to show you the basic things but you can continue along and create the section tree if you want if you want to add some other animations so other we're gonna name this other okay perfect so let's create our style that CSS okay to make this look nice and for now style dot CSS all we're gonna do is just link it so go back to your index we're getting the link our relationship we're gonna add this style dot CSS and we're gonna leave it like that for now actually let's just remove some basic stylings by having the star sign forever margin:0 padding:0 okay so basically we'll remove removing all the basic stylings on our headers on our dibs and everything else and we're gonna add a box sizing of both the box okay so all the margins and padding's that we add we want to make sure that they're constrained inside that box and it doesn't actually grow our box so that's that okay now let's open this sucker up we gonna kick we gonna click on the index.html and open with live server and Wow amazing this looks so fancy so as you can see these don't have shadows only this one and the reason why is because we're gonna transition between them and if you have all all of them with shadow it's kind of crazy so okay how do we make this look nice why shall we make these chairs a bit smaller first of all and then we're gonna go from there yeah let's just do that yeah okay let's go back to our VF code here we're gonna grab the chair and the thing I'm gonna do is just add a height of 60% like that just make it a bit smaller a position of absolute absolute and again this is gonna be on the second page so the top is gonna be 70% and you're gonna see this in just a bit how how we actually position this left is gonna be 50% and we can perfectly position these with top 70 percent left 50% if we add a transform translate of minus 50% and minus 70 percent so the reason again if you don't not sure why we're doing this is because we have the picture right here in the middle right and if we want to move at 50 percent it's gonna move right in the middle but it's gonna start from the middle and then the item is gonna go this way right so imagine that it starts from the middle and then the chair actually starts from the middle point so from here to the middle all the way here so it's not gonna be in the center so the transform translate what it does it takes that that position of the item and it's just gonna move it back 50% so it's gonna be straight in the middle okay good and now it's not in the middle because we added let's see why why is this not in the it's in the middle but we have a shadow on here so at this actual this box again it kind of stretches more which is fine because this is kind of how I wanted this to look like see we have more empty space with the PNG okay stop talking it let's do this okay so before we actually style everything here we're gonna import this full page AS which enables us to do this Wow fancy oh so smooth amazing okay now now what's the problem with this the problem is that you can use it for free but you're gonna use it in a commercial if you're actually releasing this as a Marshall product you have to buy it it's not expensive it's nine bucks or nine pounds if you want to say that for one developer but we can just try it out and see how it works and we can use it on our own projects if we're not actually what does it say let's see okay so it requires you blah blah blah your project to be a public and licensed under GPL lv3 okay so if you want to create a client website then you need to buy it but hey for us just building out simple projects for fun it's gonna be just fine so to get this all you have to do is click download okay so after you hit download what you want to go to is open the top go to dist and then we're gonna get the full page Jas and you can do the min to save some space and we can get the full page min dot CSS so we need these two okay so let me just drag them out here and then drag them into the project so let's go back to here now we're just gonna drag it out into our project okay perfect so now we're gonna link everything up together and then you're already gonna see some magic going on here a link go to full page min dot CSS and down here right before our body closes script source and then we're gonna say dot slash full page min Jas okay let's also create an app dot J yes to add our own JavaScript AB KS just like that and to actually initialize this code it doesn't take too much it's quite simple all you have to do is go here and say new full page like this and then you're gonna add a code mark and then a a pound so you're gonna add the ID of whatever you have here so this big div with the ID a full page so that's what you want to add and here some whatever you name this one in case in our case we named it full page so it's easy and after you do this you add a comma and your gonna add a curly brace for an object now what you can do here is add different kind of properties for for the way your full page animation to work so you can add like auto scrolling and we can set this to true and after we do that make sure to also add your script tag here which her own script fjs sorry make sure you want to add this because otherwise it's not gonna work and in theory you should be able to do this just crawl a bit and boom it goes to the next page now I don't like this as some people are really upset about using your scroll navigation like this and to be honest I don't like it either because what if I'm down here and I want to navigate up really fast and you have to wait till these animations happen so I do agree that I don't like this but as long as you have some buttons navigation buttons to navigate from up all the way to down to be honest that's totally fine with me and I have no issues some people hate everything and unfortunately that makes very boring websites but hey to each their own and so let's add those navigations how do we do that we just add a comma in our abkhazia sandwich this weekend the same navigation and we can stay true like that okay and now we have these little buttons and we can just go straight up or go straight down so we can easily navigate you can also customize these if you want you can go to Docs you can search it up here you can add a bunch of different things to it let's go down here and we might find some as you can see a full page menu you can have navigation navigation position you can move it from right to left and we can also add background colors to these sections and here and just a bunch of different methods that you can use for us this is gonna be just fine we don't need anything super fancy that's gonna do the trick okay so that's kind of what I want to have for now and we're gonna move back to styling this up very nicely and then we're gonna finish with the animations so let's pop open our vs code again go back to CSS and here what I want to do is grab the first section we're only gonna grab the first section because one I want to add that background to it so we're gonna say background image like that we're gonna say URL and we're gonna navigate to image and I believe it's the couch let's see is it the couch yes it's the couch this looks terrible so let's fix it up we can just say background size and we're gonna take cover like that and that should fix it up nicely and now I'm gonna show you a trick how you can add linear gradients to your texts so we can just grab the section h1 okay which is this one right here okay so this one we're also gonna add a font size on like 64 pixels and we're gonna position it absolute because I want to move it to a very specific place absolute like that and then we're gonna add a top of 20% and a left a 50% okay I kinda want to have it straight in here okay so down here what we're gonna do is transform as you can see this is what I'm telling you about if you move this left 50% well it's gonna it's gonna start straight from the middle so here right so hey 50% okay so this is where I put the text but what we do is we translate this back 50% the actual text which means if you take this in half and move it here it's gonna be perfectly in the center so that's why we're transformed translating the ex back by 50% and the Y position so the top one by minus 20% okay it's safe and there we go perfectly in the center so what I want to do is add two colors to this which I kinda hand-picked out of this couch and to do that what we're gonna do is go down here the first thing you do is rather than add color or you're gonna add a background to this a linear gradient background we're gonna say to left and the two colors I'm gonna use is gonna be 8 7c 7d F and a darker one which is gonna be six oh eight eight nine six call now and get your free t-shirts it's safe let's take a look and as you can see we have that background radiant on top but I don't want it to be I want it to be under the text what is this bull okay let's not swear and so to do that and what we're gonna do is we're gonna clip the text to that background color so you can see WebKit all right we're gonna need to use the web kits here I'm gonna say background clip like that and we're gonna see to the text it's safe and as you can see now it clipped now we cannot see anything but what it did is it basically clipped that background to the text but our text color is still blank right you can imagine that we still have that gradient but it's behind this text only it's not here anymore it's not covered by the box it's behind the text so how can we make that visible well we kind of have to like to reduce the opacity of this text right so there's a special way you can do that and that's by saying WebKit like this since a text phil' color like that and then you see transparent say make the actual fill of the text transparent which means that the background is gonna show over so that way you have this nice gradient over T text wow we just wasted five minutes on a gradient on tags good job that clap your hands Wow amazing okay so anyway that's what we have let's kind of style this a bit too we can grab let's just grab s2 here and I want to spend too much time on this we can just say background let's just copy this copy piss and paste it down here and we're gonna modify this to the left and just say left top okay and I'm gonna add a white color and like a grayish color let's do white here I just do a kind of grayish color see how that looks yes you got a bit of gradient here we going do we I cannot see I'm going blind let's raise this down a bit oh yeah okay we can see it I just make it minimal just a bit just a teeny bit there we go just a bit of color good okay we have that now I don't like the text actually on this page so let's kind of change this and then we'll move on to the animations so we can say s to h1 and we can just make the font size a bit smaller 48 pixels that's gonna do the trick now if I want to change the color of this it's not gonna work because you want to modify if you modify just the background here and this WebKit is not gonna work so you have to copy paste all of these three lines from up here down here and I'm gonna just change this to like a dark like a weird dark color something like that still a bit of gravy and in there just a white or dark to dark or dark original okay so that's what we have let's kind of fix up this description a bit and then we can just do the animation this it's gonna be too mo one more minute okay very fast just grab description just add a margin let's do 20 percent like that a width of 50% you just fix this up a bit margin left 5% and then font size 20 percent 20 pixels not percent okay good and description P I just add a bit of spacing it in between those two paragraphs that we have so this top and bottom only and left right is gonna be zero so just a bit of space and between those two okay very good very good and this is still a bit too close I feel like but it's okay it doesn't even matter we're gonna modify these javascript so actually I just move it now let's do 70 percent and 70 percent okay no did they move it didn't move oh this is dissection my apologies let me where's the couch couch couch there we go left let's do 70 and 70 okay so we have 70 70 everywhere a bit better and we're gonna position these which our script anyway so let's do it let's go to JavaScript yay here the cool part is that we can integrate Jesus which is an animation library so let's import that we can search G SAP CBN you can also download it if you want but two things we're gonna need need here is tween max so you can go to copy copy script tag now let's just add it to our index.html up here paste it okay so we got D tween Max and we also need what is it called time line max with this you can chain together multiple animation so this is the animation and tween max time line max enables you to do multiple animations chained together I should say okay so we have those two so now in full page what you can do is they have a method here called on leave so whenever you leave the page and you arrive to another one this event is gonna trigger so on leave like this and here this one actually is an arrow function that has three parameters you have an origin which is the position where you leave from so the region would be this is the page this is the origin and this is the destination this is where we arrived and finally you also have direction which we're not gonna use but it's there if you want to look into it okay so basically what we want to do is we want to get the destination always and based on that destination we want to trigger different animations sell here or we can save this second section so we can get the section that we're arriving on and we can and that is located in destination dot item okay let me counsel I'll get for you to kind of see what's going on here so if we cancel out that destination take a look here if we scroll down as you can see we have this section and we have index is first is last and we also have item which is actually the section okay so this gives us back these section let me also show you that make everything clear take a look boom section - boom section tree okay so it gives you back that section once we have that section we can get the title so we can say cause title we can set this equal to section so we can get that specific section and just get the h1 from that that query selector and we can say h1 okay so we get the hitch one from each section so now what we can do is create a timeline so this is G sab consti l equals new timeline max like that and what we can also do is add a delay here which I'm gonna show you why here down here we can just say T L from 2 so from 2 gives us a position we want to start from and at position we want to end in so here we can say we're gonna get R at the title that's the first thing that's the thing we want to animate the second thing is gonna be the duration which is gonna be 0.5 then we have a curly brace object here and this kind of defines the position where you want to start from so I'm gonna say Y the Y angle is gonna be from 50 okay and the opacity it's gonna be from zero and the second object is where you want to arrive to I want to ripe to y0 and at the end I want to have the opacity at one okay so the starting position and ending position basically that's all at this it's safe let's take a look scroll down and it happens but as soon as we scroll it starts happening so what we want to do is delay the scroll so by default this scroll is lasting 700 milliseconds now how do I know that that's because I spend a lot of time looking at this and going crazy so what you can do is add a small delay to this so here we can just add an object with a delay of 0.5 seconds okay so now we can see the actual animation because it's gonna wait a bit there we go but effective so what if I want to have specific animations for each page right maybe only here I have these images or this text and I don't want to do some animation with this paragraph for example because I'm selecting it here right and if I go down here and I don't have a paragraph it's gonna throw error error we have an error and everything is gonna blow up nothing's gonna work anymore and we're gonna we're gonna cry so how can we fix that well the way we can fix that is we can add an S statement the good ol it's statement we can just say if our destination and we can just say that index okay because each of these sections have an index triple equals and you just give the name of the section you want to have specific animation student so in this case in this case not cage were not animals the index doesn't start the index starts at zero so this would be the first page and this would be index one so if I want specific animations for this page then I would add one and I would add the rest of the animations in here now why did I add the title in here because I want this to have I want this to happen on each section okay so if you want general animations that happen on each section then you can just add it up here without any if statement okay so in here we can select the chairs set this equal to document dot very selector all I'm going to select all of them and say dots chair perfect and finally we have the description so we can select that as well and we can say the scription like that okay so we have those two and we can just start animating everything very simple you can just say TL again from two like that and then we can grab the chairs like that and we can have a delay of zero points a time of 0.7 seconds that's the duration and the thing that we're gonna do here is we're gonna do some magic we're gonna move the chairs and and then we're gonna fade each one of them out and fade them in so one of them is gonna keep layering on top of each other which gives this illusion like the chair is changing its color but we all know it's fake so what we do is add an X and this is y I can told you that actually an object here the position doesn't really matter precisely because we're gonna position these here and JavaScript anyway so I'm gonna add X of 100% and in here we're gonna say minus 10% okay let's take a look if this works there we go it works do I like the position of this not really so you can kind of play around with this and see kind of what you like something like that that's a bit better maybe 35 there we go something like that okay so we have this chairs now make sure you don't close it up and here with dot a semicolon because we're gonna chain multiple animations so the way you chained is you just add another dot and say from - okay and here we're kind of gonna repeat ourselves we're gonna get chairs chair is zero so the first chair from this node list and then we're gonna add one second to this I'm gonna add a bit more and just add the past T zero to opacity:1 okay that's all we're gonna do and what we're gonna do is just duplicate this two more times and just change this to one and two okay and that's it let's take a look as you can see now it comes in and then it starts changing the colors okay let's try again because the it fades in the transition doesn't happen anymore okay so this doesn't work it just fades in and what I want to have south works looks very nice but what I want to change is this one I want to put it to one okay so the first year I wanted to be visible from the starting position as well so when we go down it just comes in like this nicely and then it starts changing the colors to see different styles and and then we also get that nice shadow just popping in there we go very cool so that's how you can chain together animations you can also add the text if you want let's say I want to add here I can say from - again we can grab that description maybe add a 0.75 to it whatever you want and just kind of copy whatever we have up here with the title just to keep everything consistent paste this in here and there we go that's how that's just so simple how you can add and mix these up together so if you want to add more you just go down here make another if statement for the second page and yeah that's gonna be it take a look right there very simple thank you again very much for being here with me again and watching these episodes hope you enjoy this one this was hard to make a is because the weather outside is so gloomy spooked Ober is on to us it's rainy it's hard to fill just because I have these lights on me and it's burns my retina I cannot I can't see any more okay until next time make sure to give yourself a kiss at night what am I talking about alright I'll see you guys in the next one peace peace peace [Music]

Channel: Dev Ed

Views: 252,566

Keywords: fullpage.js tutorial, javascript animation, full page slider, full page scroll, page transition tutorial, javascript tutorial, full page scroll js, full page scroll javascript, javascript animations, javascript animation effects, javascript animation tutorial for beginners, website animations, gsap, fullpagejs, gsap animations, dev ed

Id: gE-Yuu2eEio

Length: 30min 19sec (1819 seconds)

Published: Sun Oct 06 2019