Page Transitions In React - React Router V6 and Framer Motion Tutorial

hey guys how's it going i'm back here with another video and today i decided to bring this video where i'm going to be teaching you guys how to do some page animations while you're doing a page transition using reactprotodom and the framework motion library so i have an example over here of what we're going to be kind of kind of like building we're not going to build this whole website this is actually a website that i made um for a video that i posted last year but the important part of this video is um the fact that now if you move through the to the pages you can see there's a little transition right there's an animation and obviously you might not like this animation this is this lighting animation that i made um you might like other types of animations like a fade in or whatever but the purpose of the video is just teaching you guys the library understanding how to make this in your application and then i'm going to show different types of animations that you might want to use and just being able to customize it yourself depending on what you want so with that in mind let's get into the video [Music] [Applause] [Music] [Applause] okay everyone so we're gonna start out with the code for um whatever for this website over here because i feel like i shouldn't i should teach you guys how to do this with an existing website so you're gonna you're gonna add this page animations to a website that you already have but if you also are starting from scratch you can just use the information that i want to teach you guys um in order to create your website already from the beginning with the page transitions animations already working so with this website you can see right now there's no animation just whenever i switch the links it will as you can see just i go to the page and the code for this is as following it's pretty simple there's a lot of code for this project and again if you want to check out i have a video showing how to build this but the important part is recognizing that we're using react router dom right and we're defining our routes in our app component over here now i'm using version six of react router dom so this is how we define routes we use the routes component over here and we use the element property to pass the components that we want to display now how exactly are we going to add the animations well the first thing we have to do is install the framer motion package in order to install it you open your terminal go towards where you want to install then just run yarn add framer motion like this then press enter and it will install the package now i if you're using npm it's just npm install but i'm using yarn so it should be fine actually yeah it just installed the package so let's just close this right now now what we want to do is we want to come to where we define our routes which is on our app component and i want to show something important that you guys have to do whenever you're doing some page animations most animation libraries will require you to pass a property to your routes component called the location property now you can get that location by using a hook from react for the dom called the used location hook and just defining the location like this just saying const location equals to use location the reason why you need to do this is because this library is over here they are unable to recognize which page you're in based on the route by not by not getting this information from react rather dom so you need to access the location for this to work but the problem is as you can see it broke our website and the reason for this is because um we can only use the use location hook in components where it's inside of the router uh wrap over here right and we can't do that right now because we're declaring this outside of this router component right so instead we need to call this inside of a component that is inside of this two things over here so that's kind of difficult because we're defining our routes over here right so what most people do in this kind of situations is they actually create another component over here i'm just going to a components folder you can put this wherever you want called animated routes and this is just the component which will define all of your routes so i'll say animated routes and i'll define my component i'll zoom in a little bit so you guys can see it better but basically what we're going to do here is we're just going to copy all of these things over here and just put it directly over here and then right over here we're just going to pass the animated routes um component there's no issue in doing this you don't need to put the routes inside of here so this is completely fine and now we can just use this use location hook inside of the animated routes component because it is inside of the router component and we also need to import this so i'll just come here at the top copy the import statement and put it all over here we don't need this one anymore just like we don't need um this three over here anymore and now what we need to do is we need to grab all of the import like the the pages the components that you're using on the routes and pass it to this component over here right because this is where we are rendering the actual components so i'll just open this up a little bit more so you guys can see better and i'll just paste it over here and it should be working perfectly now what we want to do now is we need to pass the location over here by saying location equal to location not only that but for for the framer motion library to work we also need to pass a key which will be the location dot path name and this should be fine for all of the initial configuration right we haven't done anything related to the library yet we're just setting up stuff so it can work with reactwaterdom now what we need to do is we need to import the stuff directly from the framer motion library so i'll just come over here at the top and i'll import something from the framer motion library but i want to point out something a lot of people get bugs when just importing stuff directly like this which is how they define in the in the documentation and unfortunately i don't know why this is doesn't work for me and it doesn't work for a lot of people so a workaround for for this if you're getting this bug is you just put this over here as the import statement and it should work if you do it like this and then what we want to import is the animate presence component so presence like this and then just wrap all of this around with the animate presence component so we'll just paste it over here not like this i'll just say animate presence and then just wrap all of this around with it and this will basically define which routes you can actually animate now if i save this you can see that the website is working um but the animations are not here we haven't actually created which animations we want to work so um they're not appearing but it is set up in a way such that we can actually add animations to our page transitions so in order to do this we're actually going to have to go directly to the different pages that we have inside of our project so we have the home page we have the menu page the about page and the contact page so recommend going to whichever ones you have in your project and doing the following i'm going to go first to the home page this one over here and what we want to do is we want to import at the top over here from the same package that i mentioned which is this thing over here let me just copy it and then paste it over here and then what we want to import is something called motion and motion will allow us to define how our animation will run and the way we do this is we grab the upper level div of our page so our home page is this div over here right this is where what encompasses the whole page and we define it as a motion dot div like this this will also be a motion dot div then now that we have this we can actually add some properties to it right it works like a normal div so this was part of this div before but it also has another property to it which is called the initial property the um the animate property and the exit property so those are the three things that you need to put inside of your motion div now they define how your animation is going to work so for example if we want to do a very simple fade in and fade out animation we we can do it this way in the initial we need to explain how um the opacity of our page will look like right we add some css in this case we're doing a fade in fade out so we change the opacity from zero to one zero making it not visible one making it visible and what i'm gonna say is that of the opacity initially is equal to zero but what the animation will do is it will turn the opacity equal to one and when we're exiting we want to make the opacity of this be equal to zero again so that it it completes the transition right now we can save this and check to see if it's working so if i refresh the page and i go to another page for example directly from the home page you can see it kind of fades out right and it works for every single page because it is actually exiting with the correct animation that we defined now the way we make it so that um it will also work in between other pages and the home page is we just add the this whole thing over here on the other pages as well so i'm going to go to the four pages the about page do this as well so let me just put it over here on the on this one over here just put this then we also need to make this into a motion div by adding the motion dot div around it and finally what we need to do is just put the import of motion over here at the top so just paste this so you do this for every single page and it should be working for every page so i'll do this right now and i'll be back in a second okay so as you can see i did this i added the the animation for all of the pages and i made all the correct unnecessary changes and now if we refresh the page you can see that as i navigate towards other pages it doesn't matter where i go to it will always work out we have this little fade in fade out animation now some people might not want this they might want what i had in the beginning of the video so i'll show you guys how we can do something similar to that so to do that it's actually very simple as well we all you have to think about is just css animations put into react it's all the same right it's almost like you're just making a keyframe animation which you can do by the way in using the library to do something like that we could for example come to the home page then say that we want initially for the width of our page so the width of our page to be zero right and then when you're getting to the page we basically just set the width of the page to be equal to uh a hundred percent so what it's supposed to be right and i can set the width to uh something like a hundred percent um to say that it's a hundred percent of the way of the width or whatever you want you can say a hundred vw which means um the width size or you can even do something like this you can set it equal to the window dot inner width right but i like to use the 100 one because it's how i define the width of my my page so i'll do it this way and then at the end what you can do is you can say that when you're exiting the page you're also setting it to 100 right because you're you're basically um and you need to change this to x by the way not with because you basically imagine this way when you get to the page it will slide in but then when you're exiting this page you want this little image or the div over here to go the other way right you want to initially it come from the left and then in the middle and then when you move to another page you'll go from the middle to the right so we can do that by setting by changing the x and setting the start of the x of the of our image to be equal to not a hundred percent but the window dot inner width this is a little trick that i find um to work well for me so you just set it to be at the the right end of your page and let's test this out to see if it works right we'll refresh the page we're in the homepage when we go to the menu it kind of slides out right but the transition isn't complete because the menu one doesn't have the same properties so what we can do is we can just copy this and um put it the same way to the other pages right and it should be working if we do something like this so i'll refresh the page go to the about page and it didn't work technically it did work but there's one thing we need to do you can see um it works kinda okay like it doesn't work perfectly because it has a delay so if you want to fix this delay we can actually just add how long we want the duration of the transition to be so you can say something like transition over here then add the duration from this transition so i'll say like duration um i can say something like 0.1 then save this and add this to all of the other ones as well like this i'll just come to the about paste it over here then to the menu paste it over here and then to the home and paste it over here now you can see that if i start on the homepage for example all of them will have the transition now the speed of the slide can be dependent on you you can choose whatever you want if you find the one that i put not as like visually appealing um you can definitely change it and do however you want but um i just wanted to make this video to show you guys how easy it is to make paid transition animations um in react using react router dom version six if you enjoyed the video please leave a like down below and comment what you want to see next subscribe because i'm posting two times a week and i'll massively appreciate it it'll help support the channel and i'll be very grateful if you guys could do that again thank you for watching and i see you guys next time [Music] [Applause] [Music] [Applause] [Music]

Channel: PedroTech

Views: 251,499

Keywords: css, javascript, learn reactjs, nodejs, react tutorial, reactjs, reactjs beginner, reactjs tutorial, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, react router, react router v6, react router tutorial, react router dom, react page transitions, react page transition animation, react pages, framer motion, framer motion react, framer motion tutorial, page transition

Id: FdrEjwymzdY

Length: 14min 16sec (856 seconds)

Published: Thu Mar 31 2022