How To Code Page Transitions in React.js with Greensock (GSAP) using React Router

in this episode we're taking a look at how we can create a page transition within react the way we set up the routing in this project does involve using a react router and the animations do come from G SAP so it's both react router and G SAP for these page transitions so we can see that it kind of just floats up when it's exiting and then when we enters the new page it flows in from bottom to top it's a really cool so animation so let's go ahead and see how we can do that so getting started I've already installed create react app in our directory so let's go ahead and clear this and install the dependencies that we're going to use let's go ahead and write npm install node - sass since we are using sass we are also gonna use G SAP and we need to install react router Dom with react router Dom we do is use react transition group this is specifically so that we can target when our pages exiting and entering go ahead and install all four and in the next screen I will run npm run start to get things going so we've got all those installed let's clear this and open up BS code and we can also close this and we'll leave real ipsum because we're gonna need to get some dummy text here in a sec now let's open up FJ yes and we also need index such a yes so we are using react router like I said but this isn't a tutorial on react router it's more of creating those page transitions so I'm not gonna be taking my time to describe how we react router works there's a lot of tutorials for that and I'll link them in the description below now to get things started with react router you need to wrap your entire application in a browser router and to do that instead of using the app Jas we're gonna use the end XJS so inside here we can import and some people like to call it router we can import browser router as router and we're going to simply import this from react browser Dom we can then wrap our application with the router component and just take the application place it in there and save that we want need to come back to this so we could just close the index on ASL and what I'm going to do is actually let's run pull it up a terminal let's run npm run start which will start our project up in the browser and we can then close Wow that's messy let that run let's make this a bit bigger let's go into the code and let's set up the project structure first you want to switch the CSS file to app da bess yes yes so let's just rename this and we can just get rid of these stylings that are already set inside our up we don't need all this so we get to get rid of everything inside the active we can also remove the logo if we want and let's create a new folder in our source folder and we can name this folder pages we can create another folder and we'll name this folder components in our pages directory we can create a new file for a home a yes and we'll create a functional component for home and we'll just call this own or just write a home page and I'll try to go as quick as possible because this tutorial is going to be a bit lengthy so go ahead and create an about yes and we're going to create a functional component for about and we'll call this a Bal page let's save this and then we can jump into our components for the components we're going to have a header j/s and this is going to be our editor and in our header let's do a header component and for the class name I want to say what are we going to write we're gonna do a header class and thanks in the previous video I mentioned that JSX wasn't working in my react project and I I'm fairly new to vs code I definitely used to use a Dom a lot but you guys mentioned that I need to do some configuration in order to get vs code just JSX admit thing working so it works now thanks for that in the previous video if you commented to get things started we're going to import a component from react router Dom called nav link and so link is typically the links between these routes so the navigation tags but what's special about a nav link is it allows you to give it an active class so when you jump from page to page it will notify you which actual page you're on so just have like an active class in our case it was just sort of like a a bolder background or a red background so to keep things simple I first want to create the routes so that we can navigate to them and then I will do the header but in this case we do just leave it like so for now it's completely blank which is fine because we don't have anything in our app.js file now to define our routes I'm going to create a array for our routes and it's going to take three different properties so let's create a routes array and our first object we're going to have a path set to the home directory so this will just be home next we will create a name and the name will be home and then for our component our component is just going to be assigned to the home component which is in our pages right here so let's copy this and at one more time and then we could finally say our about directory or the path is going to be about the name is going to be about and the component is going to be the about component so we've got our routes set up we can import those pages now we're going to import the about page from if we jump into too many let's jump into the pages directory and locate home we can copy and paste this one more time and switch home to or switch the about sorry to home so we're bringing in both our about end home pages or components and then our route is telling us that the path of the main directory or the home is going to be for our home and then the path for forward slash about it's going to be for our about component we can then create some routes now to create routes what we need to do is we need to m4 route from the react router down so let's go ahead and do that and then we can scroll down or just a minute in a circle here but just go down to the JSX and in here what we can do is bring in routes and inside route for now logs I just want to render out the three pages we can bring in the home component in between these two tags and the attributes routes going to take is going to take a path attribute and so the path attribute is going to be the four slash home when we clear this up we are going to map through our routes array and then display the routes path but for now I just wanna just coat it in here just to get things started so path is going to be the home directory and it's going to render out the home component if we save this and take a look we can see the home page is now being rendered out but we also want to render out the about page right now if we visit local three thousand four slash about about F sorry about and still going to give us the home page now we need to copy this and paste it in here and we are going to render out the about components when we visit the about path let's save this and if we refresh we can see that yes it's rendering out the about page in the four slash about but it's given us also the home page and if we visit the home page is just giving us home page and why is that in react router they have something or an attribute actually called the exact attribute and this exact I have tribute will match the path exactly so now when we visit the home page will get home page and if we visit for slash about we only get the about page simple enough there's a lot more you can look into there's gonna text yeah there's a lot more you could look into but again this video is primarily for pay transitions so we've got this coded out and it's good but what we need to do is incorporate this browser array now to incorporate this router a what we could do is we could do routes dot app wow what is going on around stop map and we are going to pass in this is using oh my god I am blanking it's not a tree shaking method destructuring so instead of using like route map and then dot name or whatever or path we're just going to use D structuring to bring in our path and component so we got path here and we also need to bring in component and then we're going to create an arrow function and then inside our map function we are just going to return the route so in here you can just put routes with a we don't want a self close it just yet we're gonna put the routes in here and inside the route we can create a div and this dev let me use Amit I'm going to erase sorry no what am i doing okay but I'm going to create a div that will have a class name of page and inside this page div that will be on every single page we are going to render out the component so we can then bring in components which is going to be home and about and will render it here now the Rao is going to have a key since we are using map we need to use key the key is going to be path you can have path or the name it's all up to you in this case we'll just say name and the path is going to be set to path now we also want it to be exact so go ahead and bring in exact now I do have an error because our array is route a not routes so let me just actually rouse makes more sense since it's more than one route now save this and what should happen is about patient be rendered in localhost 3000 about and then local 3000 is the home page and if we take a look at the console we have the app which is our parent components and then we have the class name of page and the component home page now if I jump to where is it at about we can see that it's the same structure just the content inside it's changed still has the class name of page that is cool and that's a quick way of setting up react router but that's very basic we want to go beyond that what I would first like to do is completely code out the about and the home page with animations and then work on our routes to incorporate G set for that transition so let's do that let's go ahead and jump into the about page and code this out now if you could remember how the project looks like in the end it had sort of a title page for both the about and the home page or not a title page it had a title component for the home and the about page and instead of needing to write that code twice we can create a new component and just call it title Jas and this will be the title for both pages we can just do our f for a functional component and we'll call this title so the title is just going to be an h1 tag and it's going to have the class name of page - title inside the h1 tag we are going to create another div for the line wrap and we're going to have another div in here with the class name of just lying now the content for this one just going to be hello YouTube and then we're also going to do another line wrap and the second line wrap will represent the line underneath the first line which is hello YouTube so I'll say hello YouTube so I come here I'm wrong Crom will say that and in here what we have is let's go home and I think it'll be easier to represent this if we just jump into our home page and let's import what is it called our title components so let's just render this out instead of having this being rendered off so we could see what is actually happening okay jumping in back to the title though we want to create the animations of the the initial title slide so let's go ahead and do this and then we could check out how that looks now one thing that we do need to bring in from react is we need to bring in use ref and use effect so let's go ahead and bring those in so use ref will allow us to reference the Dom elements and the news effect allows us to wait until the Dom was loaded before executing an animation now the first two variables we're going to create is let line 1 and we're going to set line 1 to a use ref up no so it's not going to exist before the Dom is loaded and we can copy and paste this again and change this to line 2 and then for our div inside the line wraps our line class negative we are going to add a attributes and just put L did it I can't spell L is going to be line one signed out to L and we can just copy this again so our rep attribute is going to be line 2 and line 1 so this first line is the variables going to be line 1 so this div is going to be line 1 and then line 2 is going to be our second tip or the second line now I do want to pause here for a second because both of our pages are working so we have hello YouTube I am a cron for the home page and if we jump into the about page we have about page but the issue here is we want a navigation working and we don't have a navigation right now if we go into our fjs we aren't bringing in the header so let's jump into heterogeneous on our component and create the navigation real quick so for our first navigation link it's going to be called home I could just write that right and it's going to the two attribute will tell us what directory it's going to so it's going to the home page and we also want this to be exact and finally to set an active style we can just write active style as an attribute and then just write CSS in here but it's going to be CSS or JavaScript so font way it's going to be camel cased and we could just write bold and then we can just set the color to red we can copy nap link again and change home to about and then change the to directory to about let's save this go back into a beyotch is we can actually get rid of the class name of app and we can just render out a fragment so go ahead and leave that empty and inside this we can bring in header and I want to wrap the routes map with a container so let's create a div for a container and wrap that inside now we need to import header as a component so we can just import header from components and header now it's going to render our header and it's going to then render the contents of our routes so if I am an about page it is going to have an active style which is the bold and the red and if I switch to the home directory it's going to render out that content now what we could do next is actually code out the content from the about page and the home page and then work on styling after styling that is when we'll get into page transitions let's jump back into our home page and what we want to create is we want to render a inner div so this is going inside our container from the app j/s and so inside the inner div we are going to render out the title and underneath the title we can create another div and inside this div will have ap tag and we can give this P tag a class name of info so this is where I'm going to crap crap this is where I'm going to grab dummy content and just paste that in if we go back into our app we have the headline and little paragraph now I want to create the same content for the about page but just change it up a tiny bit what I can do is just jump in to our home page and just copy the JSX and just paste it in to our about page we need to also import title so let's go ahead and import title now one thing I don't like is the fact that the content is the exact same from hello YouTube I'm wrong and the about page to switch that what we can do is pass in props for our title component let's jump into our title component and inside our title component we can pass our props so the props we are going to accept is a line content and will accept a line content too for the second plane so that this content can be changed let's save this and we can then jump back in to our about Jas and for line contents we can pass in a certain content that we want to display so we can say this is V and for line content to which is the second line we can say about page I think that's better than saying I'm wrong wrong because that sounds silly now we could do the same for the home page we can pass in the title and so instead of about page we can say on page let's save that and then finally in our title instead of this content here we can then render outline content for the first line and for the second line we can render outline content to let's save that and if we jump between both of our pages it seems to work just as we wanted to we can then finally jump into our stylings and we are using google fonts so let's go ahead and jump with google fonts we are using two specific fonts first one we're using is Poppins and then we are using ooh this one seems pretty nice where is it at that bus I lost knew I want to say that font weights we're selecting for Poppins they're going to be a light font weight and a semi bold so let's go ahead and select the import and we could just drop this in to our SAS model let's go ahead and target the header class the header is going to be a width of 100% we are using flexbox so go ahead and write display flex align items is going to be set to center and the height is 100 pixels inside our header we have a text which is our nav links the margin between each one is going to have a 20 pixel margin left and right the text decoration we're setting that to none the color we're setting that to one zero one zero one zero and the font size let's go ahead and set at 212 pixels I think 14 would be better since it's a little bigger the font weight is 600 I wonder if I set the font weight for font size font family let's go ahead and make the font family Poppins great let's save that and see what we've got that's perfect so home at about is working and it looks great we can then we can jump out of our header class and jump in to container the container is going to have a position up relative with the width set to 1280 pixels and the min width set to 1280 pixels the margin is zero Auto and the display is going to be flex finally we are justifying the content to the center then we can target the page class and inside the page class we're having an absolute position and inside the page there is an inner so the inner is going to have a display of flex and a justified content of center and finally inside the inner we jump into our h1 which is going to be the content so the h1 is going to have a different font family and the font family is going to be that second option that we imported which is Bevis I new and the font size on this one is going to be 52 pixels with the letter spacing set to point 1 rim then we have a line rap class inside that h1 and the line rap is going to have a overflow of hidden with the high set 266 pixels let's scroll down a bit and outside the h1 we have our P tag and the P tag has a font family of Poppins which is the other phone that we imported and the margin top was set to 200 pixels with a width of 340 pixels the font way we're gonna set that to 300 pixels and the line high let's do that set to 24 pixels with the font size of 14 pixels let's save this and take a look at what we have so we've got this first page and then we've got the about page this looks really good and it is getting us to where our final project looks like here is where we're going to code out the page transitions the very first transition I want to make is to our titles I did start a bit using use riff but we didn't even get close to being done so what we want to do here is create that reveal effect that we have on our page titles and to do that we need to import our lovely friend Angie SAP and this is kind of exciting because the other day after I released the previous juice after torial joosep came out with version 3 lots of cool things in it but I'll keep it simple I won't necessarily dive too deep into the new features of gee SAP maybe in the future video but what we're going to do in here is we're gonna use our use effect and so let's go ahead and write our use effect and for our user fact we need to depend on line 1 and we also need depend on line 2 so now all we need to do instead of importing tween Max or tween light or Timeline lights we can just use GCF dot from which is pretty cool so the two variables we're working with and recruited Steiger effect is line 1 and line 2 so let's go ahead and create an array for line 1 and we're also bringing in line 2 after that we are going to define the duration which is 0.8 seconds and then we pass in the configurations or properties that we want in here we want to give this a delay of 0.8 efforts loaded to run then we want the ease oh my god they need to get out of my way we want the ease set to power 3 dot out and with version 3 we don't need to bring in power 3 or any of the easing options we can just ride up like so so this just says part 3ds oh and then our Y is going to be set to 64 and then finally we want to stagger them so it's going to be a stagger and the amount that we want to separate each transition or effect by we want it to be separated by 0.5 teen seconds let's say this and take a look at what we have if we switch pages we should get it working which is pretty cool so there is no exit transition it's just kind of disappearing right away and then once the what is it called once the Dom is loaded on the next page or that components loaded through our use effect it renders out the transition pretty sleek and pretty cool but this doesn't necessarily involve page transition this is just running in transition once the page is loaded kind of like transitions but we're gonna do things a bit cooler here in a sec so this is going to do it for our title animation we can simply close title jsow and focus another place so the place we're focusing mainly now is the is the app J yes we can get rid of or disclose home J's and about Jas and honestly header Jas we don't need any of that now the first transition I want to focus on is sort of creating a opacity transition and we can do that with gzip but honestly it kind of may get a little wonky when doing animations in G SAP and especially when they're very small transitions and so when it comes to learning react router and when you learn you're gonna discover that hey where's our switch and in terms of transition where is our transition group now react router or so I react transition group specifically said not to use switch or a transition group when dealing with animations especially when working with react router and so what they recommend is to use CSS transition now I promise this isn't just CSS transition we are using G SAP and I want to show you both of them what I want to do is I want to bring in CSS transition and bringing this in from react transition group I also want to go ahead and bring in G SAP and bringing it from G SAP alright just so let G zap cool so we brought these two in and let's go ahead and use it so I did mention I want to create a opacity transition to where it fades out and fades in and that's fairly simple to do now inside our routes what we need to do is we need to access a prompt called match and so what match is going to do for us is it's going to find out if the link we click on matches the components that is already displayed in it so it does we don't want anything to happen or we don't want to display the new components so we need to access this match prompt which exists to our our route components now the component we can render inside is the CSS transition now inside the CSS transition component we can then display our div for the page and the component component now we are going to pass certain props so in we want to make sure the end prop is set to match does not equal null we are going to give it a timeout of twelve hundred milliseconds and then for class names make sure to add the s it's going to have a class names of page and then finally we want to set another attribute called unmount on exit now it's telling us that match is not defined and that's because I made a mistake of adding a parenthesis rather than curly guess that's going to be curly bracket and then the exact code we just ripped now with this what we need to do is our page class for our CSS transition has certain additional classes added to it specifically because of the CSS transition and what that means is we need to jump into our app CSS and what happens is with page - in turn this is a class that could provide a transition so with the page enter we want to set the opacity to zero and then there's also one called page - enter - active and so this is when it's when the page you've entered is active what do you want to happen we want to make the opacity set to one and just like you guessed it actually we can copy and paste this instead of enter we can change enter to exit so if you look at the documentation for react transition group there is four key elements to when a page is loaded you go into page enters and when it's active and when it's entering you got the page when it's exiting and you got to patients exit so this right here would be entering this would be entered this would be exiting and this would be exited we don't want the opacity for this one to be one we want it to be zero and we want the opacity for when it's exiting we want it to be 1 so we want to also add transitions and for our active class we can add a transition for our opacity we can set this to 400 milliseconds and we also want a transition delay and so the transition delay is going to have 600 milliseconds we can also take the transition opacity 400 millisecond and edit on our exit active class let's save this and if we take a look at our react app if we switch pages we can see our page fade it out and then fade it back in once we reach our home page cool I mean so honestly this can be good enough but if you want to incorporate GCF in the page transition there a bit more work that you need to do let's go back into our code and start using G SAP here to create more animations with G SAP what we need to do is we need to create two functions one for an animation for when we enter a page and one for when we exit so to do that what we need to do is we need to create a function and we'll just call this on enter and then we'll just write a node parameter and we can just define our animation in here so this will be the inter animation we can do the exact same if we just copy and paste this and just say on exit and this will be our exit animation now with react transition group you can pass these two functions in an attribute so on exit will run the on exit function and so I'm just keeping the names the exact same here and the on enter function will run the on enter function that we define up above here what I want to do is I want to first console.log know just to I can't write on a console log node so that we can see what is being defined as our node variable so on exit when we exit a page what is going to be logged and then when we enter what is going to be logged so let's open up the inspect tool and jump into our console and so this one's an encounter two children with the same name or the same key name okay we'll fix that I know where that's at but now if we jump into our home page we are entered with this animation and then this one is the one that's exited so if I switch it's going to be reversed so this one is the one that's exited which is our first element or the home page and the next one insert is this one so what I need to access is I want to split these up to where there are two different dibs without using use ref I need to get to the children of the inner and so then that will give us the page title and this is div so that we can animate these two item for our inter animation we can do G sabda from and we can pass in the array so that we can animate two different items we can do node children and it's going to be the first element and so that gives us enough to where we then need to know which element we want that we want the page title or the paragraph so we want the first element child and that's going to give us the page title we then want to copy the exact same thing here but we don't want the first element child we want the last element child and this will give us the P tag we can then exit the array and define the duration it's going to be set to 0.6 for our duration and inside the configuration we can then describe what our animation should look like so we want it to float up and then page transition and then the next page float in from the bottom or float up from the bottom and that's pretty simple to do so entering we want the Y to be set to 30 we want the delay to be set to 0.6 our YZ is going to be the exact same ease that we had before it's just we're switching the out to a noun so it's going to be power 3 dot in out so that's easy ease out and then our opacity is going to be zero and finally the stagger we're setting that to an amount of point six let's save this and take a look at what could happen here if we go to the about page we can see that animation worked but there is nothing exiting so the exit animation isn't really working but the entrance or the on enter animation you can see it's kind of fading in and going up we can copy the GAF dot from oak copy this and put it into our exit animation and all we really need to change is we need to get rid of the opacity and we also need to get rid of the delay and then switch the Y from 30 to negative 30 let's go ahead and save this and if we switch pages it's going to go oh that didn't look right okay so something is wrong but that's fine let's take a look at what is wrong so the issue I had was I had a dot from rather than a dot too because we're moving this animation or moving the elements up we want to send them somewhere we don't want them to come from a certain place so if we switch navigation to home we could see it goes up and then it comes in similar to about it goes up and it comes in so that is all you really need to know in terms of page transition with react router and gee SAP it could get a little complicated but once you get kind of the basics down you can do a lot of great transitions that's gonna do it for me if you enjoyed this video and if you want more G SAP and react content or if you want any other content you want me to go into please leave a comment down below and don't forget to like that really helps me out and don't forget to subscribe I'm really close to 400 I never thought I'd be at 400 which is exciting thank you for everything and have a wonderful day

Channel: Wrong Akram

Views: 20,471

Keywords: Javascript, React, React.js, GSAP, Greensock, Animation, Js animations, web animations, gsap animations, code, design, ui, ui/ux, react hooks, animation website, useState, useEffect, react router, page transition

Id: IosumpcNafU

Length: 35min 51sec (2151 seconds)

Published: Tue Nov 19 2019