Super Easy Page Transitions With React Tutorial

hey there my gorgeous friends on the internet in today's episode we're gonna create a super simple page transition using react this is the simplest way I've found so this is gonna be the best tutorial so stay tuned take a look how cool does this look wow amazing really excited but before we get going I want to thank today's sponsor which is myself developedia.com check out the amazing courses down in the description below if you're interested in upgrading your react skills JavaScript skills and any other skill that you want in this world maybe that's a bit too much an exaggerated but there's awesome stuff to learn there all right let's get going so starting off we just have next JS installed and I'm using Tailwind if you're interested in learning more about this I have a project that's already made like two or three weeks ago you can find it it's a full react project using Tailwind so but that's it we're starting off completely scratched otherwise but that's for styling okay so what do we need for a page transition well there's loads of packages out there but probably the most popular one for react is called framer motion and it's all right it's not great but it's all right I'm just gonna be honest with you but let's install it so just open up the terminal and say npmi framer motion like that let that sucker install and then we're gonna open up npm run Dev and we can get going okay so where should we start off I think it's a a nav bar is a good start um we could make folders it's just gonna be one component but why not let's call this components and in here we are gonna make a new file called navbar JS all right cool so now that we have that up and going um what we're going to do is create the function export default function that part like that okay cool and we are gonna return some jsx so what do we want for this well let's do a nav like that okay and then here I'll just have two links basically um again you can add more but we're just gonna keep it simple so a UL Li just to keep everything nice and consistent but actually here we're gonna need a link to travel between the pages right so you wouldn't use an anchor tag because we're in next.js you need to import something called link so import link like that all right and then here we're just going to add the link and we're gonna add our list item in here and we are just gonna say home all right and the href for home is gonna be just a dash like that okay and we're just gonna duplicate this one more time and and this is gonna take us let's say to contact okay and I'm also gonna change the name of this to contact okay so let's import this uh and the place we're gonna import it is gonna be in our app.js here all right so what this is is basically this returns whichever page we are on okay so if we go to slash contact like that um this is going to dynamically render out that page all right so what we can do is if we add the nav on top here that's always going to be there it's not going to be re-rendered anymore all right and you can do the same to your footer if you want you can add it below it so let's import it here we can say import navbar like that and then all you need to do is add parentheses here and kind of just open this up like that paste it up there and then right above it here you can add your nav bar like that error what's the error don't know let's see okay so you get this error because react is just such it's so finicky right it doesn't allow you to render two components beside each other because that's occurs in the framework world so you need to add these silly little parentheses and the parentheses but they're called fractions you just need to basically wrap everything up in like a div the only difference is this doesn't render a devout for you and that's all uh but to be fair I think we're gonna add styling uh to all of these so we're just gonna make it the dev in the end so take that react okay and there we go we get to see all all the lovely link tags which is pretty cool um what else do we need let's see uh let's go back to the nav bar and this is looking quite good actually so I think we're just gonna leave it like this and then we can focus on making the pages okay so we have our nav oh yeah some styling that's what I wanted to do uh let's go here to the nav add a class name we're gonna say text to excel like that font medium and that should be good to go all right and then to the UL we'll add a flex and a gap of 12. that's there we go just to give it some space we're gonna have padding another stuff in just a bit but that's essentially our nav bar okay so let's do our home page I think that's that makes sense to do first so let's head back over to our index.js and here we're going to import let's import our animation now so it's called motion like that but we can rename it as M just to keep everything shorter you're gonna see because we're gonna need to add it to each individual item element and if all of them have motion it's just kind of look horrible so let's let's not do that so we'll rename it like that and yeah that's that's everything we need to import actually Okay so let's go down here below the head okay and let's add a main tag here let me switch this over to your react there we go and in here we are going to have a div with a H1 all right so this is going to be the big text um and we are going to call this paper call like that this is Maxine's design company that's coming soon stay tuned for more um okay so there it is and then on the stiff here we are gonna add a couple of classes so we're going to add a large uh margin y we're going to add a bit of padding we are gonna we're also gonna add an overflow hidden but not yet because I want to show you why and then on this H1 here we're going to add a class name of text 6xl and we go text Center and then on large screens I can specify that I want the text on the right text right and large screen should also have a text let's see we're gonna make the size much bigger so let's do do do do do here we go with text 9xl okay so take a look at this if I make this bigger it's going to line to that side and it grows it grows in size so that's really cool we're going to need to add some fonts as well because this doesn't look too nice yet but that's okay one thing at a time okay so after the step here we're gonna go out and we're gonna make two more divs div and this is going to be basically two sections here uh so two more divs okay and that's it I promise so another div and another div and that's it all right because on this one I just want to add a flex and justify between okay and then all of these call all of these two divs can have Columns of content in them okay so in this one let's do let's do H2 that says design all right and we can oops we can duplicate this twice one two two and we can see company and here 2022 okay and in this one we can say let me just copy this over you can have a H3 that says this pickle gonna make you smile another H3 that says Scottish designs to make you happy and the last One's Gonna Be Cool contact for cool ah click content for cool transition that's it okay there we go all right so now we have this kind of column layout going on here which is pretty cool all right so that's essentially all the markup here um obviously you can do more styling and stuff like that so I guess for this we can just add let's just keep it like this okay we'll worry about it later let's head over to our contact just so we have both of our Pages up and going so let's go over to our pages we can delete this API one we don't need it we're going to make a new file called contact.js cool okay so in here same stuff that we usually do we export a default function contact like that don't you just wish you could just write simple divs without ever writing this ever again I don't know is is it just me it might just be me loads of times I mess up this return and I don't know why it's not working and why my jsx is not showing up but oh well okay we're gonna create the main tag here and we're gonna do the same thing as we did in the other one which was to import this motion just like that cool okay so now in here let's add a let's add a div and we're gonna pretty much have the same format where we have a H1 and its own section that says let's talk and then we are gonna have another div out here Dev let's just save it now if we head over to contact we can actually see it there we go let's talk and now we'll do the crazy thing where we have a div with another div and another div which is really fun if you ask me okay so let's add another one in here let's start adding actually some class names so you can see what's going on we'll add a flex and a flex gap of 40 to this first one okay um to this top one here we'll add kind of the same thing we added to the other one which was an m y of 96. P1 and that's it all right just like that cool and then here on this inner div we can add a class name of large text to excel and a text of Base okay let's add the content in here we'll add a page four saying find me and after this one we'll make another one and here we are going to add a large text of 6xl a text of 2XL and we'll do an underline to it as well okay so there we go we can see find me that's cool and here we'll just add a UL with some allies and we're going to call it a day so let's do Twitter there it is let's just duplicate this a couple more times like that and we can do Instagram LinkedIn and dribble okay you can add a link tags to this as well just wrap it the same way we did in the nav bar and you are pretty much good to go okay cool what else should we do here oh we'll just add a little padding to this so what you can do is hold down alt and click and then you can just type class name and as you can see it just adds it to all of them we'll just add a bit of padding bottom of two all right that's looking pretty cool everything is still quite funny looking um this let's talk text doesn't work so that's what we need to look at it's because we never added anything to this so we can just head over to our index and copy everything over from the H1 here and paste it on top of it there we go boof done cool all right so now we can pretty much navigate between both of these pages which is fantastic if you ask me um what we need to do is add a bit of margin to this so what we can do is head over here right to this div and the app and we can just say py24 it's going to add some padding top and bottom and then we can see PX let's do 12. okay and then you can do for larger screens as well just by saying LG I can do PX of 48 or something like that so now when the screen becomes larger look at that boom cool what funds did I install I don't remember I think it was lato um yeah okay so the way you can do that is download it off Google fonts and I'll just drag it in here for now I'm gonna put the code up on GitHub as well but you can literally download it from Google fonts drop it in your public file and then what you can do is if you head over your to your Tailwind here in the extend folder you can add a font family like that and then you can give it any name you want so that the light and then you just add it in there like that and that's one step of the process the Second Step would be to go to your Global CSS and in here what you need to do is just Define them using the font face so let's go here and there we go you just add add font face the font family again you pick the name here so it should be the same as this one and then you just navigate over to your public file folder with the file and that's that simple as that okay that's cool um so what we can do now is go over to we'll just apply it to everything for now here we'll do font latto bold and hit save there we go cool so we got that going which is really nice and yeah I think we can start heading into the animation so what do we need to do well let's let's start with the home page okay so let's go over to the home page and use this motion thing that we imported up here okay so essentially what you do is you change your Elements by appending this motion tag on them all right so whatever thing you want to animate in this case let's say the whole page all right so it would be this big big big parent div and you just add a motion dot to it like that but since we renamed it we can just do M div like that all right and this is going to be much cleaner than having that long motion tag all right did I sell that enough for you to rename it hopefully I did okay and then you just define properties in here like initial which is where should it start from like maybe from opacity zero to opacity one that would give us a nice fade in so if I say something like opacity zero all right then this is basically an object in here and then I can animate it to a opacity of one all right so now as you can see when I refresh everything Fades and it's quite slow it's super fast so if I want to slow it down you can also Define a transition property here like that again just an object and you can define a duration let's see 0.75 seconds for this okay refresh let's see that's much slower much nicer we can also do delays here we can do easings so let's add an ease to this of ease out and you're gonna see that's gonna animate just slightly differently all right that's pretty cool um yeah let's keep it like that for now um okay that's pretty much everything we're gonna need here so let's style this up a little bit because what I want essentially to happen is for these two pages to kind of slide on top of each other so let's add some styling here I'll add the class name and we're going to say we're gonna change this to a text Gray of 900. I'm going to add a position absolute as well we're going to say top zero left zero V full which is going to do full width and height full like that and I'm going to add a BG of orange 100 all right there we go so you can see that and then LG 48 like that and also a px of 16. like that okay so why am I doing this I'm doing this because if I don't have position absolute here if I remove it as you can see our home page is actually just this section here since we have our navbar separated and it's going to be rendered out on both Pages it's going to cut off this background for us but if we add a position absolute it's gonna look like it's the full page actually so it's kind of a little illusion that we're doing here and just so our effect takes up the whole screen but we have a little problem now where the nav bar is not showing up so that's okay we can go back and solve it um it has to do with just the indexes it's just being covered up so if you head over to the map or here we can add a z index of 20 something big like that and a position of relative and that's going to pop up now on the screen all right cool so now what we can do is pretty much do the same thing to our contact so let's go to contact and head over to the main tag here we'll add a class name and we'll do the same thing we'll say text Gray 900. we'll do a position absolute top zero left zero with full height full I think our dog Yoshi just did a big fart because it smells so bad oh my God who will add an intense red to this so we'll do bg400 like that and we'll do the same padding as well cool there we go so everything lines up quite nicely okay and then we can pretty much copy paste over um the same animation thingy here that we did the initial animate and transition okay so let's get that head over to contact and again remember to append this m to your main tag and then we can paste this initial animate and transition okay so now every time we visit a page we have this animation popping in which is cool the problem is that there's no exit animation right it's just instantly flashes so what we need to do is import something from frame or motion that is going to detect when either a component or a page gets unmounted from uh the Dom okay so it's going to recognize it it's going to animate it and once it's animated out it's going to remove it so what we need to do is basically wrap the components that are unmounting with something called animate presence so we're going to have head over to our app.js and what's changing for us this this component right so we need to go here right and import it's called what is it called let's see animate presence like that from frame or motion okay perfect so just go over to the component that is gonna change and wrap it around with this animate presence just like that cool and what else you need to do is add a key to this all right anime presence needs to have a recognizable ID I should say to know what gets removed and what it what is being changed well that's that's a tough one to say so what we can do is the simplest thing I found was to just use the router path name so it's just gonna look at oh we're on about over on contact uh and that's it so what you can do is go here and say key equal to and what we need to do is get the router so you can just say here router now we have this available here you can see router.path name that's it okay really really simple okay cool what we can also do is Define if we want this beginning animation here when we initially visit the page if you don't want it then you can go here and say initial false all right and when we visit the page as you can see we don't have the animation but when we go over to here it's gonna start animating okay cool now we still don't have the exit animation so we can head over to our home page and just anywhere here we can say exit equal to and now what I want to do is yeah let's just add an opacity to zero okay just to keep this simple so when we exit the page and we head over to something else we are going to fade it out so as you can see it works really cool now the thing is they happen at the same time if you don't want it to happen at the same time what you can do is go here to animate presence and say mode I believe it was weight like that so now it's gonna wait for this to fade out and then the other one is going to fade in all right but we we don't want that what we want is for this to stay on top and for the other pages to come in basically on top of it okay so the way we can do that is we'll remove that and go over to our index and basically on exit I want this to stay static right I don't want anything to happen to it so I'm just going to say opacity one and then what I want to do is animate in the Y position so I'm going to say y to zero percent so all the way on top of it but the initial positions should start off from a hundred percent all right so basically we're pushing the whole section down below here right and when we visit the page it's going to slide up like that as you can see all right so that's pretty cool now this one Fades out now because we need to modify that as well so we can just copy this over into here and just change it basically oops just everything here like that and if we take a look now look at that we got that cool sliding up effect then there's a couple of things that we should change like this overflow here the scroll bar is giving us trouble which doesn't look too good uh but that's simple if we're making it like a one one single page type website anyway without any scrolling we can just go here and do okay so I ended up removing everything from here actually and kept it simple and just added the Overflow hidden here on the body and HTML and that that does it so that's great that's good to know okay so we can close that up we have our transition going which is really cool but now what I want to do is transition the text here and also the small link tags here so how do we do that let's head over to our home page here and this is fine we're not going to touch this what we're going to do is go down here to the H1 and we are gonna add a animate and set that equal to y0 an initial position of y a hundred percent so we're pretty much doing the same thing we're going to add a transition so if we want to delay this and we can add it here like 0.5 and the duration should be 0.5 I thought that looked pretty good now watch this if we go over here and go back nothing happens why because we need to add this m always at the m okay let's see uh as you can see oh we're in contact by the way which is fine but look at that slides up slightly um which doesn't look too good so what I thought would be cool is this stiff here right we'll add an overflow hidden to that and that way it gets completely hidden so it kind of slides out like that so that's the reason why I added another div here and not just the H1 just so we can do this cool effect okay so just have the H1 and add overflow hidden on the container and then you can move this down and it's going to have that cool effect nice lovely and finally if we want to animate these link tags here what I like to do to be able to reuse it and not to kind of over overwhelm our code here well we're going to do kind of the same thing we did here which is going to be to wrap all of our allies with the div so we can have the animation where it kind of pops out out of nowhere um so we essentially just need to wrap everything here uh with the div like that so let me just do one here and then we'll kind of copy paste everything so this just basically needs a class name of overflow hidden like that okay um and then we can duplicate this three more times one two three and I'll just cut these in there okay so that's cool perfect save everything looks the same which is great um okay so now what we can do is I want to stagger these animations so when we land on this page here I want them to pop in one by one and the way we the only way I found to do that was with variants and frame or motion Okay so I like to kind of make my own file I'm not going to make a folder for it but I'll just call this animation dot JS okay and we'll just define basically two objects here so we can see const container like that and here you'd kind of do the same thing where you define a property and we'll call this hidden and basically I'll put the opacity to zero all right so when we go back here to the actual element we would add like initial hidden animate or show would be our animate right so we'll just basically separate it here and then we're going to add a transition here when it shows and we're just going to say delay children by 0.5 which basically means when we arrive to this page these are going to be delayed by 0.5 seconds and then we can add a stagger children which is going to add a delay between each element here okay so this is going to be a little like 0.2 seconds so that's what the container needs to have and the actual elements so we're gonna say item here and this is going to have a hidden and a show as well it's quite weird how they do it I'm honestly not a big fan of it but it is what it is I wish you could just add stagger just stagger like that and just have them animate automatically and not have to do all of this stuff but we're gonna do the same thing as we did to the H1 where we add a hundred percent to this and when it shows it basically goes to zero percent so let's do zero percent and then we'll add a little transition here where we can Define the duration of 0.5 okay that's essentially it so now we can go back here to our contact and import the container and we can import the item from the animation there we go cool so now you go down to the what you call it the parent where you have the Staggering animations in this case it's our UL I gotta love the voice cracks and then we just say variance here and we can set this equal to the object which is our container and then initial is going to be hidden and then animate is going to be show all right so we're essentially passing down the object so on animate add show which is that's right so you're essentially copy pasting that over Okay cool so that's it and then when we refresh and let's go back here and try as you can see nothing happens yet which is fine but now what we can do is go on all of these individual elements which are these allies oh what we need to do is say m here there we go so now by default it just does a fade in you cannot see it because it's really quick but that still animates in so now we can go on each individual element I'm just going to select it like this and just add an m in front of it cool and then here all we need to do is say variance equal to item all right and that's it so now if we head over here I have back look at that we got that cool little pop-up effect now see this is why it's a bit confusing because like what is the why do we need to do this initial hidden and show on this parent container um uh that's just how it works that's how you need to do it uh even though you're not really caring too much about this opacity uh zero to pass if you want this fade in uh because essentially what we're doing here anyway is we're delaying the children so this is going to happen first and then we get this nice pop-out effect but I guess you could do it like if you add a a longer duration here on show like two seconds right to The Container you're gonna see that kind of the whole container fades in as well but I don't like that effect so I'm just going to remove it but essentially that's it so here's a little challenge for you I want you to go over to the home page and now this should be quite simple because we have it separated here in our animation.js so head over here import it and add it to these two right here all right so I hope you enjoyed this little effect quite fun quite simple nothing too crazy um and yeah I have another exciting video for you guys coming on this week about forms which is going to be really cool so I'll see you then

Channel: developedbyed

Views: 107,713

Keywords: react, page transitions, react page transitions, nextjs, react tutorial, framer motion, tailwind, tailwindcss, javascript, javascript animations, react animations, react page animations

Id: S4HYwsBRpRs

Length: 36min 55sec (2215 seconds)

Published: Mon Oct 24 2022