React scroll animation with react-scroll-motion

[Music] hello everyone and welcome back so today i'm going to introduction you into react scroll motion package and this package is really cool i think because as you can see in code preview here this is the example of this package as you can see when we scroll down or scroll up we get the animation alright so this is pretty cool and we are going to create very similar like this one so i think let's get started guys so in here i have already generated create react app you can do with npx space create react app and any name application you want so the first thing that we need to do is we need to install the package so we can use npm or yarn so we can just copy this and let's open the terminal here and paste that in here hit enter all right so now there's done [Music] let's close the terminal and if i do yarn start now we have this right so the first thing that we need to do is go to the documentation here i'll put all the link in description so don't worry about that as you can see here if we want to use react scroll motion we need to wrap our app with scroll container all right root container is must be root all right so let's go to app here i'm going to remove the h1 let's say scroll container as you can see here just make sure you import from react scroll motion and inside the scroll container we should have scroll page as you can see here scroll container children must be scroll pitch all right so we can to scroll page here like so and scroll page have a props called page you can put pitch this is the page zero inside this scroll page we have to animator alright so any matter must be in scroll pitch so we can put any meter here let's say any matter and inside in here we can put any html tag we can put div span h1 h2 and anything you want so in this case i want to say heads too i'm going to say let me show you scroll animation all right so let's put emoticon here to make it interesting and yeah let's try to see let's take a look what we have this is what we have we can scroll down and scroll up okay and let me see here basically in the animator here you can put animation props and give any animation function you want so for example let's say animation here animation set that equals two and in this case let's scroll down here i'm going to go with sticky first all right so sticky have a default value 50 for the left and top 50 percents that's mean if we put sticky the text will be in the center of the pitch okay so let's try so here i'm gonna say sticky let's make sure we import up here and let's invoke the function like so all right so now save and let's take a look what we have as you can see the text now in center okay of course you can play around with the number of the sticky function as you can see here we get to specify the left and the top for example you can put 20 percent and let's say 30 percent okay no we don't need to use percent basically we can put 20 and 3d now we have like so all right so pretty cool so i will i like to put that into the center so i just put sticky right here to check the animation when we scroll we need to create another page all right so we can just copy this okay and paste that down here and this should be the page two which page two which one let's change the text into it up scroll out so let's put the click on here save now as you can see the pitch is this is the pitch one and this is the pitch too okay maybe we can put the zoom effect right here and just put zoom here you can see the let me show scroll animation here it's always still in center if i scroll down or scroll up just ignore these text here this is the come from the page one basically all right so as you can see the text here it's in the center and if i scroll down or scroll up it's still in the center so how do we for example i need to add another animation pretty simple we can use this batch function here okay so let's try here i'm going to cut that out let's say patch and inside this patch i have sticky and for example let's say let's say fade here by default they have values zero and one let's say wait here say fade and save as you can see if i scroll down the opacity will be gone okay so let's try with a move out function here let's see right here you can just put move out and if i save now if i scroll down it will be move to the top okay so we can give a value here let me make it bigger we can give a value for example 0 for the horizontal and for the vertical i'm going to say minus 200 right so now it's more fast okay if you you want to the text move to the down you can put 200 likes so for now just want to say minus so the text will be go up and go on pretty cool so let's go with the page one here so in here i'm going to create variable call let's say zoom in scroll out and let's create the variable up here we can create outside the function okay so we can say cons zoom in scroll outside that equals two and in here we can use patch okay because we need to put uh more than one function in this animation props inside it here what we can do is i'm going to say sticky in first click in and then i'm going to put the weight in and zoom in of course you can just play run with all the function and now as you can see this is the page one if i scroll down as you can see the fit up scroll out here which is the which one here is zoom in okay let me scroll and boom now let's create another switch of course this should be page 2 and i'm going to just remove this and let's say paid for now and for the tax i am fed up all right so now save and let's take a look this is the first animation which is page zero this is page one as you can see the page one if i scroll down it'll be following the content here because we put the sticky in right here now let's move into the page too in page two i'm going to create another variable as well here let's say wait up so let's create the fight up variable so we can say cons wait up set it equals to so in here i will say patch and i'm gonna use fade i'm gonna use sticky i'm gonna put that in center so you can use sticky here and also i'm gonna use move all right so now let's see if and let's take a look this is the patch 0 h1 and this is the too and fade up all right pretty awesome let's go with page three so you can just copy paste that here so in page three here i'm going to change the background of the page here so let's try add a div inside the scroll pitch so i'm going to say div here let's give a class name so that equals to let's say section three and we are going to put the animator inside the div here and let's say i'm going to put h2 first s2 and then to animator inside here like so and we don't need to specify the s2 inside this animator we can just put attacks here because we have already that heads to outside the animator so in here i'm gonna say hello guys i'm gonna copy and paste that couple time let's see here nice to meet you use this let's say goodbye and i'm gonna use this and the last thing is let's say see you okay and i'm going to say let's save this loaf here now save and just make sure you import the apps dot css here and i'm going to styling the section three let's go to app here so the first thing that we need to do is i want to remove the margin and all the padding padding i'm going to grab the html i'm going to change the phone family into ariel alfrediga sun serve and i'm going to grab the section 3 class and i'm going to change the background color into let's say a f 2 2 d b the egg all right the color i'm going to change that to white and now let's save let's take a look we don't get the color because we not specified the hake so we can say hey 100 percent how about that here we go you can see if i scroll down it's pretty cool and the text here we are going to add animation in here so let's go back in app so in here i'm going to say move in i'm going to say the x axis i'm going to say 1000 and y is 0 and for the nice to meet you i'm going to say move in let's say 100 to the right and zero also here i want to say move out say one thousand zero and let's say move out i'm gonna say minus one thousand zero all right now save and let's take a look guys so this is the first okay as you can see if i scroll down [Music] i'm fed up and um something wrong here so if we need to put the text in center here we can use right here we can use display flags basically here so you can see display flex flex direction with flex flex direction to column align item center and justify content center as well now save and as you can see the text is in the center now so if i scroll down pretty cool this is move in and the move up does not work what happened with move out it's not working of course this is working and the move is basically will be animated when we have another pitch down here okay so let's add another pitch this is the last thing i'm gonna say patch three it's four basically and inside in here i'm gonna remove the diff and side in here i'm going to say any matter and inside this animator let's say heads 2 and just put a done here and let's give these checks and in here we are going to put animation and let's say i'm going to use two function animation here first thing is fade and then i'm going to use sticky let's put that into the center now save and let's take a look here so now as you can see let me show scroll animation and very good am fed up scroll out is pretty cool it's zooming and i'm fed up it's pretty cool and we have the background here as you can see the move out will be work and we have done here all right so pretty cool of course you can just play around with all this animation type here and yeah i think this is pretty cool you can use this package in your next project maybe and yeah i think that's it for this video guys hope you learned something new and yeah bye

Channel: Cand Dev

Views: 62,430

Keywords: react-animation, react-scroll, react scroll, animation react

Id: OAx0we521sk

Length: 16min 57sec (1017 seconds)

Published: Thu Sep 23 2021