How to animate on scroll without libraries using a custom function

hello again guys welcome to another tutorial where i'm gonna be showing you how to create your animate on scroll your own custom animate on scroll without using any libraries natively in javascript so i'm gonna be making it in uh in react app but the things i'm gonna be doing is actually um is actually just in native javascript so if you have no idea what i just did i'm basically um pulling a new create app using docker instead of using npx create react app and i have a tutorial in my channel that explains how to do this as you can see we have already have a create react app that's it i'm done in like about 30 seconds so if i open this directory i have my app here and i can basically just open it in vs code and voila i have a new um react application so that's pretty much it for the react application let's just make stuff here so i got this folder from the docker so let's start with the um with the custom function so let's open a new folder here and um let's just call it utils okay you can call it whatever you want and i'm going to be creating here the file and let's just um let's call it custom aos stands for um animate on scroll all right so um let's open the um let's open the application in the browser so we can check few stuff yeah that's messy here let's just exit from this exit from that and have this on the side all right fantastic so um we need a long page in order to make some scrolls and in order so that everything can works out and now let's do something like this as you can see if i do inspect here we got something that called um page of x and page offset y so y is on vertical scroll so if we do it right now it should be zero but if i scroll a bit and call it again it should be another number and if i scroll and call it again it's another number so basically what's happening here is this is the page offset y so each time i scroll vertically which means on the y i think they call it y axis ah the number is getting higher so what we want to do so when we scroll beyond certain um y-axis on a number on the page y offset we want to make something let's start by making our custom aos function so first of all we're going to be starting by export because we're going to be exporting it and let's just call it custom aos and um it's going to be an arrow function and it's gonna take a an ad event or listener for the window all right so window add event listener and the event listener is gonna be scroll sorry it's going to be scroll and it's going to take an arrow function here as the second parameter and this is the function that we're going to be creating actually this is the event that's going to be happening when we scroll so let's just uh console.log and let's just type scrolling and um yeah we need to import this function so let's import this function in our app obviously you can import it wherever you want so we're going to be creating here a use effect i'm using the react app so you can use it in windows unload if you are using a native javascript because i said native javascript and i meant i'm in the code obviously advent listener this is javascript stuff native vanilla so let's import the use effect command i on mac um control space maybe on window and now we need um we need to call this function let's see if i can important without manually writing the import so ctrl v command i yep great awesome and this is the function now let's put an empty dependency and let's see what's up here so i'm scrolling and as you can see when i'm scrolling it's print scrolling scrolling back up still scrolling let's clear this see now i'm scrolling down awesome so it's working just fine let's console.log here the uh the window page of c y and now check this out yep see this is the page of cy and that's exactly what we are going to be doing right now but we are going to be making our own custom function so let's give it and parameters let's say animation for the first parameter and um element for the second um for the second parameter all right let's clear this out and what we're gonna do we're gonna be accessing um a dom element so let's say const el and document we're gonna be using the query selector and we can use this to select elements from the dom and now because we are not going to be typing the element name manually like that all right because this should be reusable and that's the whole point of making the custom function so we're going to be just putting the element here and later on we can pass each element we want and this is woodwork dynamically on other stuff so let's create a new variable um let's say animation point and i'm going to be explaining what i'm doing right here so we're going to be accessing the element and the element has its own of um it on offset top all right so offset top offset top small lifter yeah i guess it should be like that now minus the el off set high and what i did here is um i could make well let me you know what let me comment this and we're going to be explaining what i did here so right now let's make the if statement so if window dot page offset and what i'm saying right now if you reach um higher than this page offset now higher than what let's say higher than 200 so if the y here is bigger higher whatever it is then 200 then we're gonna be adding i mean we can do let's console.log for now here so um let's just cancel 200 all right or like bigger higher again whatever it is and let's make another thing here and let's say it's gonna be less than 200 than just console less than 200 and let's clear the console and sorry i did that too fast because i want to scroll to the top and now check it check it out now i'm scrolling it's less than 200 less than 200 less and now it's bigger than 200 and that's pretty much what we're gonna be doing but instead of less and bigger we are going to be making our own class and that class is going to be containing the animation that we are want to do so if it's bigger than now again we want this to be reusable and dynamic and 200 is not the perfect thing now either if we want our animation to be bigger than 500 remember the page offset y-offset is going to be different in the mobile ipad on different devices so we don't want our animation to be related to just a static number and that's why i made this here the animation point it's going to be the top offset of the element that we want to make the animation when we reach it and the minus the height of the element so imagine if this is for example the element just ignore the line of codes i don't want the draw right now but if this is the element all right so this is um so this is the top okay and all of this is the height so we're going to be doing the top minus all of the height so the animation is going to be trigger when we reach the start of the element this part so if this is the element this is the part that's going to be triggered and you're going to be seeing it right now so let's uncomment this and now instead of making 200 let's put the animation point here and the animation point here and now we're gonna be uh making the el which is our previous element this one that we um that we took from the dom and class list add and we are going to be adding our own animation and we will do the same exact thing here but instead of add you guessed it gonna be removing so that's pretty much it maybe like we're not gonna touch this again maybe we're gonna be doing here like maybe minus 100 or 200 again i know we said it's dynamic but like we're gonna leave this and maybe we're gonna do uh we're gonna be writing here minus 100 or 200 if we don't want to trigger this exactly on the top of the element and you will see what i'm talking about um just right now so let's start by making the animation um so let's make a simple animation actually you can use whatever you want in your own glass so you can make keyframes rotation opacity um transform scaling moving anything you want now um i'm just going to be doing the simple thing here so trigger trigger aos i have no idea what i want to do but let's say because we have no element right now and so let's make a square element and let's just to um simple stuff here and you can't really properly okay let's just comment this function for now so yeah we have this um this element let's duplicate it let's make actually three elements let's give it margin bottom um 300 just so we can have spaces between each element and yeah i guess this is pretty much it for the body let's just do a display grid so not place items place items which is um place item center is just like display flex justify content center and align item center and that's yeah that's pretty much it let's make it yep 600 or 500 doesn't really matter so this is probably not probably this is not going to be animated on scroll because it's already on the top so the animation is going to be happening here and here oh let's just do a basic animation here which is gonna be first of all we're gonna be adding a transition transition and if you have no idea what it is i'm gonna be showing you before the transition after the transition so you can um so you can have some idea all right let's just make it liner transition and now we're gonna be um scaling the element and that's it as i mentioned you can do every animation that comes into your mind here keyframes or whatever it is but right now this is the um the animation that we're going to be triggering and let's just test the animation for now and maybe this is not the smartest thing to test the animation i can use the browser or whatever but i'm going to be testing it in a hover uh hover pseudo so if i put the mouse here this is the animation that i want to trigger now as you can see it goes uh bigger smoothly but when i remove the mouse it's just pop and that's the transition effect now i need to put this also on the square element now check this out smoothly up smoothly down if i remove the the transition boom exactly so so so right now for the magic we have the custom aos here and again to our function i'm just going to be showing you what i did here so it's going to be taking the animation which is our class and then here the element the element it should be a query selector and i use query selector because you can choose here it can be class it can be id wherever you want how we use it like this custom aos and now the first um so the trigger aos which is the animation sorry so this is our animation and now our element is square and we need to put a dot before otherwise it's not going to work so we can um so let's see nup and what we missed and this is probably because all of them got the same class name so let's just for testing purposes do sk2 and try the sq2 here and now let's refresh the page and yep so you can see now what i mentioned before is probably we're going to be doing uh some minus here is check this out the animation and scroll happen when the element is almost at the center of the page see that so if we do some minus here let's do a minus 200 and now yep now it goes up and now yeah now it's more or less when we trigger it let's make the animation bigger so we can notice it now that's awesome that's the first element that's the second element and because there's no uh place to scroll down there so we can't trigger the animation but if we make the page yeah if we make the page um higher this is the first element second element third element so yeah you can do this we don't need to animate the first element for the classes yes you need to have a class for each element you want to animate and um you can actually like the third element let's see you can trigger another animation so if you want you can trigger um let's say move left and now all you need to do is make your custom class here which is move left and let's take the same transition and let's say a transform translate x give it a 100 pixel and now when we reach the third element check this out second element is gonna go bigger and third element it's going to go to the right see this was just because of the hover so you know this so again see that's pretty much it

Channel: Moody Codes

Views: 15

Keywords: animate on scroll, animate content on scroll, web design, html, animation on scroll, css, css animation, vanilla javascript, animate on scroll in js, react.js, react js, animate in js and css, animate on scrolling, scroll and animate

Id: 0OErBKpl0Y8

Length: 17min 30sec (1050 seconds)

Published: Tue Oct 05 2021