Animate On Scroll in 9 minutes | AOS

you know what is going on guys Pro maker dev here and I hope you're doing fine I hope you're staying safe so in today's video I'm actually gonna be teaching you how to make this pretty cool effect this animate on scroll effect so if i refresh the page you can see that whenever i scroll there are a bunch of a bunch of divs that are gonna fade in different directions this is from the left and that's from that was from the right and this is from the left and that's just that zoomed in and that zoom out and that just fades it fades in so if you only know HTML and CSS and you're not pretty good at javascript then that is not going to be a problem because we're gonna be implementing a library so we're not gonna be doing any JavaScript like only one line which is pretty easy okay so this is actually my project right here and those are just divs I hope that's not going to give fuse you out that you can actually make this it's just a bunch of divs I am Dave one I'm Dave two and they don't really fade out because we haven't really implemented that library yet so let's just go right into our text editor so this is our H R this is our HTML nothing crazy as always it's just a container and a bunch of divs inside of it so bunch of divs I am Dave one Dave - Dave three all the way to div six and that's actually pretty much it and this is the stylings it's very very easy that's all I've got so this is for the container and this is for the div if you actually want to want to see that stylings I'm just gonna leave the source code down below in the description so that you can take a look at it so now in order to implement that library or in order to make those cool effects I'm just gonna go right here to the documentation so it's actually very very easy to implement so this is the link I'm just gonna copy a copy paste this to my HTML in the head it's because it's actually a CSS file so I'll just copy paste it and then I'm gonna copy this script and I'm gonna put it down below in the bottom of the HTML right above the body so let me just tap that over like that now now we have linked our HTML to the library now all we have to do is to go to each element or each dip that we want to give it this animation and just give it this attribute of so this is the attributes this is the div that we this is just an example so we go to the div and we give it this attribute and let me just go to the second div and I'm just gonna paste the attribute space right there and this is fate and now we have the option to change this into they'd left fade right fade upside down so I'm just gonna do fade to left and now if I went and take a look let me just scroll all the way up I implemented the thing in in the second if so when I scroll it's just going to fade left alright so I can I can do the same thing for the other divs and all I have to do is just change the left to right and I'll go to the fourth dev and I'll change this to up and this is going to be fade down just to show you guys there are a lot of you're gonna find everything in the documentation all of the other options that you have there are pretty much okay let me just show show them to you so this is where are they I'm just gonna scroll all the way down and this is the animations that you can actually implement so this is fade fade out fade out fade left right up right and up left there's also this flip I'm just gonna implement this real quick because flip up okay well I have two data iOS equals two and then fade flipbook and if I went and refreshed fourth div right there you go that's that that's the sixth okay so as I told you before guys you have a lot of options there there's also this zoom in that you can use I will change the fade down and I'm gonna I'm gonna use this zoom in and that's that I believe it's the fifth okay that's it so you can actually see when I scroll it actually cleans very very fast already does the animation like in in a very short amount of time and the default duration is actually 0.4 seconds it's 400 mil milliseconds all right so you can actually change this all you have to do is you've got those options right here and you want to go to data iOS duration and you can set it to 100 milliseconds which basically means one second so you want to go to let's see the second div and you can just paste the duration change it to 100 this is 100 milliseconds you can change this to whatever number you want just know that it's that it that the unit is actually milliseconds it's not 1 seconds so now the second div is going to kind of slow down a little bit not like the others you can see that the others are pretty fast but it's the second div is just very smooth you also have other options you've got offsets and delay you can give it a delay there's duration easing and mirror and once and anchor but the most important ones are once and probably duration and maybe delay as well the address is not that useful for me at least so I'm just gonna show you how once works so basically you can see that when I so when I scroll down it actually makes the animation and then when I scroll up and then go down again it's going to make another animation so it's just going to do that infinitely now you can actually change this by setting this once it's actually set to false but you can actually set it to true and it's going to make the animation once now I'm just gonna copy this and paste it in my div as always like this and just change false to true so it actually does it only one time and when i refresh I scrolled down it gives me this pretty cool animation and then when I scroll up it's not going to fade away alright it's just going to do it once unlike the others the others do it infinitely but this second div because we gave it this parameter it actually changed now the thing is you don't want to go up to each element or each div and give it this attribute because this is going to be a lot of work if you have a lot of divs you're going to go to each to each elements and then you just want to give it this attribute change the duration to change the the offset maybe so actually there is another way very easy which is you want to go all the way down to the scripts right here and you see that this is an object well this is actually a method so you want to open up curly brackets and right here all you have to do is write the duration for example and just change it to I don't know like 300 a 3,000 milliseconds okay notice that this is actually not an equal sign um so this is actually pretty much it so all you have to do is refresh now what it's actually going to do is change the duration to all of the divs that you have in the the HTML so now if I were to scroll down it's going to change the duration to all of them now there are also some other parameters some settings so offset delay duration easing one though those are the default ones all right so you can change the faults to to true and yeah that's pretty much it now notice that you're not going to put a data i/o s because this is actually not an attribute this is uh this is an object alright so that's it so let me just change the ones to true so I'll just copy this and go right here comma and then once set it to true true and then go and refresh and yeah I just changed it it's it's only doing it once and that's pretty much it it's pretty easy right it's I believe it's actually so much easy it's going to make your life so much easier so that's the end of the video guys if you liked it please please give it a thumbs up because it helps me if you like it really really seriously just give it a thumbs up and subscribe to my channel if you're new alright so I'll see you in the next one peace out [Music]

Channel: ProMaker Dev

Views: 25,325

Keywords: aos animation on scroll, animation on scroll, triggering css animations on scroll, how to trigger animation on scroll, scrolling animation, javascript animation trigger on scroll, scroll based animation, animate content on scroll, scroll animation, html css and javascript scroll animation tutorial, javascript scroll effect, jquery plugin, AOS library, AOS.css, AOS.js animate on scroll html css only, AOS with html css, scrolling Effect, animation of scroll

Id: 0kmFlBJIUkQ

Length: 9min 15sec (555 seconds)

Published: Thu Apr 30 2020