Smooth Page Transitions with React Router and Framer Motion

what's going on so in this video i'm going to show you how to do smooth page transitions using framer motion and react router so i got this little dummy project all set up basically i got some routes and i got two pages nested inside of a section route it just has these buttons this page thing and it renders an outlet where our children are rendered and you click these buttons and it takes you to these pages but we want this to be like smoothly animated so let's just get started so first of all let's create a component called animated page and with this component we're gonna wrap our we're going to wrap our pages in this component so luckily framer motion comes in clutch and gives us some really useful components to use and so basically to start using it you just do motion dot and then whatever the element you want it you want that element to be so in this case we're just using a div and this motion.div takes in some props that dictates how this component is going to be animated so we're going to be taking in children and let's just render them here and to create our animations let's store the animation data in an object called animations so basically we're gonna need three objects we're gonna need an initial object which says whenever this component mounts um that animation that it first mounts with it's going to start in this state and then the animate object is is basically saying like it goes from initial to animate and it animates that transition when it when this component mounts and then we pass it in an exit object and whenever this component unmounts it's going to transition to whatever state is inside of this exit object so we want to initial initialize the animation with an opacity of 0 and an x of 100 and we want it to fade into an opacity of 1 and move into the center of the screen so x 0 and when the component unmounts we want it to fade out and move over to the left side of the screen so now we got to go into this div passing the variance prop and declare the animations we're going to use and then pass in the initial animate and exit props and pass in the string of the name of the object so initial and animate and exit so now we can wrap our pages in that animated component just like that and we can do the same thing over here just like that so now if you notice um the animation is working and we can adjust how fast it goes by passing in a transition prop to the div the motion div and it's it it takes in an object and we can specify a duration of one second so that's um kind of what we're going for but we wanted to do the fade out animation that we specified but it's not doing so because react is unmounting our component when we go to our new route so it's not being able to do that animation because it's uh it's unmounting before it can do so but it's not really a big deal because framer motion comes in clutch with a component called animate presence so basically what it does is it detects if the key of this child has changes has changed and if it has changed it waits until the exit animation of all these children are finished before unmounting those components and then after the animations of those children are done it mounts the new components into the screen so in order to um do that we're going to need to give the routes child a unique key because if we don't give it a unique key it's always going to be the same component and it's never going to animate presence is never going to know when to do that uh exit animations so let's go over here and call the use location hook because every time our paths change our path changes we want to animate the exit animations on the children so on the routes we give a key of location.path name and set the location to the location object and the anime presence component declare that exit before enter is true so basically um every time we switch the page our routes component becomes a new component because in react every time a component has a different key reacts considers that component to be a completely different one from the previous one so it remounts it and in that process animate presence detects that and waits to unmount it until all the animations are done so as you can see here it works perfectly and yeah i think you got the gist of it so thanks for watching i hope you found this useful and i'll see you in the next video

Channel: Lester Fernandez

Views: 264

Keywords: Lester Fernandez, lester, coding, programming, react, full, stack, code, web, javascript, end, router, routes, framer, motion, how, to, animate, animations, page, transitions, smooth, transition, between, pages, key, location, hook, hooks, v6, react router v6, framer-motion, front-end, easy, new, 2021, 2022, fast, animate presence, animatepresence, component, components, react router dom, framer motion, react-router, react-router-v6, animation, animating

Id: pTinipkJBcs

Length: 5min 51sec (351 seconds)

Published: Sat Nov 27 2021