React router with framer motion animation

ladies and gentlemen i'm going to show you how to perform these animations or record these informations are using react router and prema motion animation library so frame of motion is a react.js animation library so this is their official website framer.com then you'll be able to navigate to the api see the overview guides how you install it and how you'll be able to use the components so i already have this in my project i'm going to leave a link to the github repository in the description of this video so if you're new to this channel don't forget to subscribe if you've already used it and i mean you have already visited the channel and seen my videos before and you're here to subscribe please do so so that uh support the channel so that i'll be able to continue you know offering a solution to those who are struggling with the recording process or who want to learn something new so as you can see our transitions are very smart sleek see that so we have a grid and the cards inside the grid are animating out and in in different times so there is that delay between the animations of the cards you can see that you see and meeting in in a different times then the single product page is also fading in and fading out and also changing its with it so without doing so much talking let's move to this is the project without the animation as i navigate through the routes there's no any animation let me take you through the structure of this project very first i have two main folders i have one inside the public folder and that is the images folder inside the images i have two subfolders that is the logos folder inside here i have the logo for my project this one here then i also have the products folder inside here i have the images for the cars all these images then inside the src folder i have a components folder which has these files that is the card.js cast.js data.js and navigation.js now this is uh my app.js which is uh where i have described my routing so i have this navigation component which is this nav bar here you can notice that it's appearing in all the routes or all the pages that's why it's outside the switch component then i have two routes that is the home then the car stroke id so the home is the one that is responsible for displaying this grid then the cars.js is responsible for displaying a single product page this one here then i have also installed the react icons library that is where i was able to access this icon that you're seeing here i think that is all about the routing so i'll now start performing the animation and maybe before that i'd like to mention that this cast.js is the component that is responsible for displaying the grid this one here and the car.js is the component that is responsible for displaying the single product page design then i have data.js in case you don't know what its function is in my project i have an array of objects and each object here is basically the information of the card that is a within the grid each card here is represented by the object in this array then of course the navigation bar which is responsible for displaying this top navigation bar the logo and this uh menu icon that you're seeing here now i'll be doing my animations in a separate file i have a file here called animations.js which i created so i'm going to clear everything here so that we shall start from scratch let me save that then i may also close this so that i have enough working space i'll also close that then what we are going to do is to start animating the grid so i'll be describing all my animations here and then export them then use them in the various components that the animations will be required so the way the grid is admitting as you've seen in uh the introduction is that uh when these pages are matching out the animation starts with the last car which which is this one here and then ends with this then when it's mating in the animation starts with this first car and that ends with the last car so to be able to achieve that we are going to use the variance whereby the animation of the parent which is the grid is going to affect the animation of the cards so i'm going to start describing the animation of the grid by creating a variable i'm going to create a variable and name it grid animation of course i'm going to export it so export const grid animation this grid animation is going to be an object i'm going to describe the animate property i'll call it show and what i want is to describe the transition in this transition i want to stagger the children which are the cards so the grid is the container of the cards so i will stagger the children i'll stagger the children by 0.1 then i'll also describe the exit admission i'll call it hide it's going to be a copy of this but i'm going to add the stagger direction i'll explain that later so after staggering the children i'm going to stagger set the stagger direction i'll stagger it by 0.1 also not 0.1 but negative 1 because it's going to be opposite save that what i mean is that uh when the animation starts because of set of stacker children there will be a delay of 0.1 seconds between the animation of the cards so if this one starts there will be a delay of 0.1 seconds before this one starts then the delay applies to all of the remaining cars now because the starting animation i mean the exit animation starts the first car to change it to start with the last car i use a negative direction that's why i have used a standard direction of negative one here now we are done with the describing how the upgrade and is going to detect i mean dictate the way the cards are going to animate so i'll right away move to describing how the animations of the cards really happen so i'll export that also i'll call it carb animations this one is also going to be an object so i'll describe the animate property i'll call it show so i'll start by setting the y position i'll be using keyframes so i'll want the cards to move from position of 200 back to zero then the other thing that i want to describe here is the opacity i'll still use keyframes here so that the positive moves from zero to one then i'll also describe the scale so i want the size to change from 0.95 to 1 so i'll use keyframes like that then i'll describe the exit animation which is going to be the opposite of what i have as the animate property so i'll change this to zero to 200 then change the opacity from 1 to 0 then change the scale from 1 to 0.95 like that let me save that then we are going to test this out and see how the animations will happen so because we have exported them and i told you that this grid is uh displayed by these are cast.ts so this is uh the parent which represents the grid and this is the cards which represent that and these cards that we have here so first before you do any animation you have to import the basic component for the animation from frame of motion that is the motion component so i'm going to import motion from framer motion then i'll also import my components from the animation component i mean file so the first one is a grid animation then the other one is the card animation like that then we shall prefix motion in our animating components then i'll set the variance so for the grid it's a grid animation then the animate property is the same as the show then exit property is the same as hide let's save that then i'll describe the cards animation so prefix motion then bring in the variance so the variance for the card is going to be card animation like that so because the parent is dictating how the child animates we are not going to describe the animate and the exit property here we only need to put the variant so if we save this and head back to the browser there is an error an attempt of input error of card animation is not exported from this let's check if the spelling has an issue card animations so let me change this back to animation just like that see if it's gone yeah the error is gone so you can see that it's happening so what i'm going to do is to refresh everything is animating out i forgot to change this to height so let's make it head then go back refresh good so navigating away it's not working i'll fix that coming back it's working and meeting away not working back it's working so what we are going to do is to bring in the animate presence component from prima motion so if you visit framer motion official website you'll be able to see how the animate presence component works so let's move to components which is this one here so that is the element presence component let's just wait for it to load so it says loaded now animate presence component allows components to animate out when they are removed from the react tree remember we have the react router which allows the components within the switch to be displayed one at a time so we only have one route being displayed at a time it means that when we navigate to that a particular route that route is mounted into the tree and all the other routes are removed from the tree so because the routes or the components are being removed from the tree it means that this unmet process is going to help us to detect that and allow the animations to take place before the unmounting is done now to be able to use the animate presence component first you have to import it from the firmware motion library so we are going to do that and we are going to apply that within where our routes has been described so i'm going to import and made presence from framer motion then the component that we want to perform the effects of the animal presence we are going to wrap it with the unmet presence let me just set this up like that so this is going to be unmade presence this one is also going to be inmate presence sorry and that i think i made a mistake here this is supposed to be wrapping the switch like that yeah then if we navigate back to the website it says that this enables the use of an exit prop which can define the state of the for the component to animate to before it's unmounted from the dome now note that the child motion component must each have a unique key prop so unmade princes can track their presence in the tree now the route that will be present in the switch statement will have a unique key which is going to be the path name of the route so to be able to access the path name of the route we need to import a hook from the react router and this hook is known as the user location hook so we are going to do that so the use location hook enables us to be able to access the path name of the router so to be able to access the user location hook we are going to represent that in a variable i'll call it location which is the same as the use location hook and the signature is that then if you console.log this you can try this zone out in your browser you'll be able to see that this location is an object with different properties and one of the properties is the path name so we are going to [Music] use the location inside the switch component and the location is the same as that location that we have described using the use state hook i mean they use location hook then the key is going to be unique of course and it's going to be the location and the property of the location is the part name this one here so let me save that let's now head to the browser and see if we are able to perform the exit animation so when we are exiting you can see it's working and when we are coming back it's working so that is the power of use presence component from the premo motion library now uh the next part that we are going to animate is going to be this h3 tag so we want it when the component is emitting out the cars will be moving down and it should move up then when the incoming animations are taking place it should move from up to its original position as the cars move from down to the original position so i'm going to describe that in my animation.js i'll call it h3 animation so i'm going to export it so it's going to be an object as usual and what i want is to describe the y position so i'll describe the animate property i'll call it show just as i have done with the the other animations so the y position i want it to be negative 100 uh to make things simple because i haven't uh described the initial and prop of the animation i'll use keyframes so it's going to be negative 100 then to zero then i will also describe the opacity for the opacity i'll still use keyframes that is from 0 to 1 there should be a comma here then i'll do the description for the scaling the scaling is going to be from 0.9 so i'll use difference then to one there should be a constant here then i'll describe the exit prop or the exit animation i'll call it hide which is just going to be the opposite word of what i have in the animate property which is show so i'll basically copy this to save on time then paste there then i'll change the values from 0 to negative 100 then from 1 to 0 then from 1 to 0.5 from 1 to 0.95 no not 0.95 but 0.99 like that let me save that then i'm going to import it in this file here so it's a h3 animation then i'm going to prefix motion in the h3 tag then i'll bring in the variant or variance it's h3 tag or h3 animation then i'll describe the animate property which is the same as our show then the exit property which is the same as hide so let me save that then head back to the browser and see if the animation is happening you can see that so when the component isn't matting out you can see how the h3 is moving like that so i'm much done with the this section here so i'm now going to move to the single product page which is this one here i'll start describing the animations in my animation file very fast so we are going to start with this section here the section that is housing the car and this text but not uh the navigation the navigation bar remains the same so basically this one is being hosted by a this div the div that is housing the image and the text is a which one let me check it is the image and text it is one here this is where we are going to perform our animation from so i'm going to just give it a simple name i'll call it a car animation of course i'm going to export it so export car animation should be constant animation it should be car not cardi so what i'm going to do is uh change the way display with the widget of that component or that div so i'll describe the animate property because i'm going to call it show just the way i've done with the address and the first thing that i'm going to do is to play with the with it just as as i said earlier so i'll be using keyframes i want them with it to move from 200 view with it to 100 view with it then i'm also going to play with the opacity so i want the opacity to move from zero to one so it should move from zero to one i think i made a mistake here let me fix that i think those are the only properties you're going to play with then i'll describe the exit which is going to be the opposite of this cellular copy and change things around so i'll call this height then i'll reverse the values so this should be 100 back to 200 then this should be one to zero like that and there should be a comma here because it's an object so let me save that but i'm going to import i'm going to import this in the car file so car animation from animations then i have to import the motion component from frame of motion like that then this is the div that i'm going to animate so i'll prefix motion here then i'll bring in the variance the variant is the same as the car animation then i'll describe the animate property this one is going to be shown then finally i'll describe the exit which is going to be hide so let's save that head back to the browser so you can see the animation is happening exit animation is working the incoming animation is not appearing but it's happening the reason why it's not appearing is because uh let me go back to app.js and explain that it's because when the exit animation starts happening here even the incoming animation starts happening on the opposite route and therefore they seem to take place in the same time so to avoid that we are going to put a probe hold exit before enter in animate presence this will allow one animation to take place first then the other one will happen so as you can see the exit animation then and that there is a flicker in our animations and i'm going to fix that in my style sheet so what happens is that because i never described the initial props of my animations in my components as you can see i only have two props in each animation they're supposed to be three so to save on that what i'm going to do is uh i set the opacity of all the animating components to zero in my style sheet so the first one is the h3 tag which is this one here so i'm going to set its opacity to zero and the other one is a discard so i'm going to set the opacity to zero then number three is going to be the car and the image and the text design so let me save that so you can see the flicker is gone that [Music] so the animations now appear to be smooth now the other thing that i'm going to fix is this background here you can see when the components animate in this seems to be you know just pops in and there's not any smooth transition so to fix that i'm going to describe the animations for the div that is housing that so if we move to card.js and these are the divs that i have that is the image and the text then i have i have this uh container div so what i'm going to do is check where the background is set i can't remember that but if i navigate to my single product page this is where i have described the background it is the car car class so if i navigate back the car class is uh in which area it's here so this is actually where i'm supposed to perform my animation so i'm going to move them from this position to to the car so i'm going to copy everything with the variant in fact i'm going to cut it and transfer it to that area doesn't seem to be happening so i'm going to cut that and paste there then i'm going to remove this motion from this area and put it here like that save that but i'm also going to change the opacity of the car component so that we avoid that flickering so opacity is going to be zero then i'm going to remove this save that then head back to the browser if we navigate to a single product page you can see everything animates them smoothly like that that is what i wanted so i'll leave a link to the github repository so that you'll be able to access the source code and all the resources of the project then if you're new to this channel don't forget to hit the subscribe button so that you'll be part of this amazing channel support the channel share so that we are able to grow together and i share this amazing content thank you for your time see you in the next video

Channel: AGE CONCEPTS

Views: 617

Rating: 5 out of 5

Keywords: framer motion, AnimatePresence, react router

Id: g7rSBaK6QIQ

Length: 34min 54sec (2094 seconds)

Published: Sun Sep 05 2021