Framer Motion | Page Transitions in React

one thing that i always seem to find is quite difficult i feel like shouldn't be that difficult is the ability when you're building a react app to transition from page to page so for example if i uh go from page a to page b i want to like fade out page a before page b comes in but the issue with react and a lot of the router solutions that are available means that as soon as you hit the link the first page is immediately removed from the dom which means that you don't necessarily have the chance to fade it out before the next one fades in thankfully i've actually found a really really good solution online using this library called frame of motion which i think is this javascript animation library which is just insanely powerful for really really nice looking animations with like very very little dev energy um i actually implemented it on the code snap website which is kind of where i'm hosting all my courses at the moment if you click through to one of my courses you can see that we have this like fade out effect before the next page comes in it's super subtle but it happens across all pages and it makes a really really big difference and so in today's video i just basically wanted to cover how that could be done using something light frame emotion and hopefully inspire you to sort of create some cool page transitions of your own so let's jump into it [Music] so we're going to be building a really simple web app today every single time we navigate to a different page within our web app we're going to see this sort of full screen transition happen so if i click on go to page 2 we're going to see it sort of fold up on itself and then unfold to page two so if i click back to go to back to page one we can see that happening on the fly as well and that also works with the back and forward motions as well which is pretty cool so this is fairly straightforward to set up with frame emotion so let's figure out how it all fits together cool so i've already built the scaffolding already i've set up a really basic create react app project with typescript and i've also installed the react router dom package so we have two files we have index.tsx and we have app.tsx and first i'll go through index.tsx it's simply the uh the the index.txt you get provided with with um create react app when you set it up with a typescript template uh the only difference being is that i've imported the browser router component from react router dom i've renamed it to rooter and i've wrapped our entire app component inside of a router component next let's have a look at the app component uh for the sake of convenience i put everything in one file so it's nice and easy for us to kind of go through and edit if we need to but effectively we have this component here called page one uh page one just has is a container with some styles attached to it uh some text inside of it which state the uh the page number that we're on and then a link which is using the react router dom uh package link uh to go to page two page two is a replica of page one it's almost exactly the same except the background color is slightly different and we also are saying uh this is page two in our copy instead of page one and that is all wrapped around an app component which has a switch at the top level uh a root component wrapping around page one a root component wrapping around page two and the paths of each are set up to be paid paths page one and path page two if you want the source files there's a link in the description you can get access to both the completed project and also the starting position if you don't want to have to manually settle this up yourself okay so first of all we're going to need to install the frame of motion package and so to do that i'm going to go ahead and open up my directory inside of my terminal which i already have set up here and i'm just going to go ahead and add the frame of motion package which is well i'm using yarn but you can use npm if you'd rather i'm going to go yarn add framer dash motion and that's going to go ahead and install the package okay so now that we have the frame of motion package installed let's go ahead and import the animate presence component into our app.tsx file so first and foremost i'm just going to go import animate presence from framer dash motion next up i'm going to scroll down our page and i'm going to go to our app component here and i'm going to wrap our switch inside of an instance of the animate presence component can't get more words out next up let's define each one of our pages animations so to do that i'm going to hop back up the page to page one and i'm going to import from frame motion the motion component and i'm going to wrap my page one component inside of a motion dot div and i'll do for now so when we're animating our pages in we need to think about the two different steps that occur when our pages are transitioning between each other that is the entering stage and the exiting stage for the entering step we need to think about what that looks like at the beginning of the entering step and what that looks like at the end of the entering step and for the exiting step we only need to think about what it looks like at the end of the exiting step because we're just going to use the end of the entering step as the first part of the exiting step it's a little bit confusing but i promise it will make a little bit more sense as we start writing it out so let's start with the entering stage first we'll provide an initial prop and we're going to provide an animate prop the initial prop is the beginning of the animation and the animate prop is going to be the end of the entering animation so we'll do a simple opacity fade to begin with and then we'll move into the more complex stuff after that so we'll do initial equals opacity zero and then animate is opacity one now we need to think about is the final prop which is what it's going to look like when we exit the stage so because we're fading in and out we want this page to fade out once we animate away from it so let's add one more uh prop to the motion.div and we're going to set exit to opacity zero and i'm gonna hit save because we want that same behavior on our other page we're actually just gonna go ahead and copy the motion.div into our page two so we're wrapping it around in exactly the same way with exactly the same props and i'm just gonna close that tag so to clarify both page one and page two have a motion div wrapped around each one of them with an initial animate and exit prop which define an opacity fade between entering and exiting the way that the animate presence component works is that anytime a direct child is changed underneath the animate presence component it will perform the transition so whenever our route changes for example we navigate to a new page we want to update the switch component to force that animation to occur and we can do that using use location from react router so i'm just going to go ahead and import use location from the react router dom and then i'm going to scroll back down to our app component and i'm going to assign location to use the use location hook next i'm going to define the location of the switch to the location from the hook that we just grabbed and i'm also going to add a key which is going to be the identifier to tell when we've moved between the pages and we're going to set that to location.path name and i'm going to hit save okay i'd say we're in a pretty good spot to actually test this out and see how it's all looking so far so i'm going to open up my terminal again and i'm going to run yarn start to start our development server and as you can see we have a page which looks very familiar to as it did earlier on if i click on go to page 2 we should hopefully see some kind of animation which we do we do see some kind of an animation however anyone with a keynote might notice that it's not quite right it's sort of like every single time we animate the page animates out but then the other one sort of flicks it in immediately which kind of ruins the sort of nice flow that we're sort of after now we can fix that really really easily by hopping back over to our code and just adding one prop into our animate presence which is just going to be exit before enter and if we have a look at the description of this prop it says if set to true animate presence will only render one component at a time the exiting component will finish its animation before the entering component is rendered which is exactly the behavior that we want we want the first component to animate out before the next component animates in so we have that nice sequential animation so i'm just going to add exit before enter as a prop to my animate presence and i'm going to hit save and now i think we should be ready to test that out again so let's open up google chrome and i'm going to hit refresh and we can see that there was a little bit of animation there which is exciting gonna hit go to page two and we have that lovely nice animation between it we have uh we have like a fade out when the page is unmounted and we have a fade in when the next page is mounted back in which is looking really slick now that we kind of know the fundamentals let's go ahead and see if we can get that same behavior that we were looking at at the beginning where the page sort of like flattens out and then opens back up again it's a really really quick change so we'll just go back to page one and instead of our initial state being opacity our animate state being opacity and exit state being the opacity we're going to change all of these to scale y which is going to scale our page down when it exits and scale it up when it enters so our initial state is going to be whoops initial state is going to be scale y zero because we want it to be flattened at the very beginning when we animate it in we want it to be one we want it to be full size when it's finished animating in and when we exit we want it to be zero because we want to flatten back down again and i'm gonna go ahead and copy those exact same props and apply them to our page two as well and then i'm gonna hit save i'm gonna open up google chrome once again and hit refresh and now when i go between go to page one and page two we get that sort of uh bizarre looking animation which probably probably really shouldn't be used i don't think that was pretty good but we kind of got this like sort of weird kind of curve on the animation when we move between the pages which kind of gets rid of the seamlessness of the animation so we're going to provide another prop to our motion which is going to be transition and inside of that object which we add to transition we're going to add a duration to it which is going to get rid of that sort of spring behavior and actually just use a hard-coded duration so i'm going to add 0.5 which will be half a second and we're gonna add that exact same prop to page two as well oops gone too far there we go so now we have two motion divs uh wrapping around both of our page components with a transition prop with which is an object which has a property duration which is going to last half a second and so now if i tap back over to google chrome hit refresh we now have a much more seamless animation rather than the sort of odd looking curve as we did before there is just one other thing that i've noticed though if i do a full refresh our initial state of the page is set to zero which means that it's animating every single time we load the page up which looks a little bit janky because we can't see because it's not animating from anything so what we're going to do is going to go back to our animate presence component and we're going to set initial to false and what that's going to do is if i hover over the initial prop it's going to disable any initial animations on children that they that are present when the component is first rendered which means that when we first load the page those transitions aren't going to occur they're only going to occur when we navigate from page to page so if i now hit refresh we can see that there is no animation when we click on go to page 2 we get the animations as we expect which is much neater and that's kind of it i just wanted to cover the basics of a simple animation uh using animate presence with frame emotion it's incredibly powerful and there's a hell of a lot more you can do of it than just this thanks so much for watching i really hope you enjoyed this sort of very brief foray into the power of frame of motion it's it's super powerful and i'm really excited to hopefully make some more videos on it so if it's something you're interested in i would love it if you could uh subscribe below it basically tells me that the content that i'm putting out is the kind of stuff that people want again thanks so much for watching and i can't wait to see you in the next one

Channel: CodeSnap

Views: 12,364

Keywords: react, transition, animation, framer, motion, css, animatepresence, motion.div, div

Id: YxLMAk2H3ns

Length: 13min 14sec (794 seconds)

Published: Tue Jan 26 2021