How to Code Page Transitions With Next.js Using Framer Motion | Tutorial

after creating my react page transition tutorial I have been getting several comments talking about how we can incorporate page transitions with server-side rendering and specifically we are going to be using next J s with framer motion the demo on the screen is gonna go through two different products and when we select each product it will transition into the product screen so for this one we are just using a whey protein specifically by ghost and if we go back you can see that it just kind of fades out and when we switch pages it's also switching their routes so we using next J s we're fetching this data and then when we click on it we are getting the data specific to the vegan protein and and everything is sort of laid out in a really nice transition and if we click on the Chips Ahoy it has the different data for it let's go back to products and like I mentioned this is next J s and frame emotion if we jump to frame emotion real quick frame emotion is a react library for animations and it's a successor to pose by pop motion which is another animation library but frame emotion is sort of built with the grounds of frame or X which is a prototyping tool and a design tool if you don't know a frame or X it's sort of like a mix of envision studio or Adobe XD and proto pie so it's or principle it's a mix of these different software's and I don't really use frame X all that much however I might start using it because they do allow you to write react code and there's a lot of customizations in here but we're not using framer X in this project we are using what they had built which is called frame emotions so that you can create animations on the web so we're gonna go through the docs and just learn how we can kind of get started here in this project and the next thing I highlight was next Jas which is pretty much server-side rendering for react since react is a client-side rendered next Jas allows us to use server-side rendering in react so that is pretty cool I do love an extra yes a lot and I definitely want to use it a lot more in my video tutorials so like I mentioned this video tutorial is going to combine frame or motion and next is to create this effect that you see on the screen which allows us just to go between different routes and animating and giving it a nice little page transition as always I will have the repo link down below and I have two branches one is the master branch which is the final project and in the starter branch which just gives you starter files to work with I'm gonna specifically only work on animations in this video so the starter files will have the project completely set up just so that the animations being implemented to get this up and running you can jump in any terminal that you have and just simply flown the project you can run git clone with the project URL and this will clone the repo with both branches then you can switch to either branch that you want if you only want the starter branch what you can do is write git clone - be for branch and then specify the branch that you want in our case it's the starter branch then you'll simply paste in the repo URL to only get the starter files once we have cloned our project in our case we're gonna write code dot to open up our product in vs code once you've got our project opened I am gonna open up the terminal within vias code and then simply run NPM run dev once that's Frane we can open up the browser and go to localhost 3000 and our project will be ran now one thing I do need to mention is the data the data that's coming in is coming in from a dummy API and this sort of fake API that I created was created using the help of the JSON placeholder so you can actually just pull in this data if you want and doesn't necessarily need to be this data that I had created but the way that I made this was using the service that the e JSON placeholder provide and that service is the my JSON server so this allows you to push a fake server to your github and then simply pull in the data through a JSON file so you can just go over here to my JSON server dot type a code comm and then you can scroll down and they teach you how to set up a JSON file on your github repo so that you can create your own API now this isn't reliable in any way for production projects I do recommend you if you are pushing to production create your own API and use that data or use a dummy data service such as the JSON placeholder in our case I just wanted to make it look cool so I just created my own dummy data which is right here if I were to go to our fake API that I'd created we can see we have two data points for the ghost weight Chips Ahoy in the ghost weight protein which is these two items like I said you can follow the how-to guide right here just to set up your own fake one so that you could play around and test your next yes transitions let's go ahead and close this my JSON server out and let's get started in incorporating frame emotion to add these transitions so let's jump into our project and what I first want to do is I want to switch over to the starter files what we're gonna do is run git checkout starter and this will switch over to the starter branch and if I run npm run dev here it will build our project but it won't have any transitions incorporated so if ours you go to localhost 3000 now with the starter files if I click on the chips of Hawaii it just takes us to this screen without any animations and if we go back it's just going back and forth without any animations so what I want to first do is let's jump into the breakdown of our project what I have is I have a pages folder which contains an XJS file and all the sat next J's file is it's just this screen right here so I'm using get initial props to hit the API and pull in certain data so that I can display it here and then in our products folder we have a ID Jas and this just passes whichever item we click it just takes us to that page so if we click here it takes us to forward slash products which is this products folder and it's getting the ID which is ghost weight vegan this ID comes from our API so whatever's passed to this ID will then display is corresponding details for it scrolling down to the get initial props here we are hitting the API but more specifically we're only targeting the data just for a specific product now I don't want to spend too much time talking about next Jas what we want to do is we want to start the process of getting a page transition setup like I mentioned you got the products folder and then you got the end XJS so it's only two files that you'll primarily working we also had the styles here but we're not gonna worry about the style since it's just about patient's ish ins let's close the styles out and in our underscore app touch a s what needs to happen here and the reason why I have an underscore fjs is we need to wrap our components with an anime presence and this anime presence comes from frame or motion which allows us to add animations to a component when it is mounted or unmounted if we jump into the frame emotion dogs we have animate presence right here and like I mentioned enemy presence needs to be wrapped around a component to animate its unmount and mounts so let's go ahead and do that what we're going to do first is we need to import animate presence and we're importing this from frame emotion now component represents whatever components we are going to bring in depending on which our accessing so the component will either be an index dot J s or it would be this products component and so whatever happens there needs to be wrapped around this anime presence so let's go ahead and do that and let's save it like so one thing I do need a pass in is a prop with anime presence and this prop is called exit before enter and so if this is set it will only render one component at a time and the exiting component will finish its exit animation before entering a new component so new component or a new route can't be transitioned to unless the component that is animating out is finished so that's pretty important so let's go ahead and set that as an attribute so it's going to be exit before enter let's save that and we can close out of the underscore fjs and this just allows us to overwrite any after u.s. defaults in next yes so the first animations we're going to do is just a simple fade in and out of the different pages so what I'm going to do is I'm going to import motion from frame or motion and in our parent div let's go ahead and replace it with motion div now when we specify a motion in front of the div this allows us to add any animations that we want now inside this div there are three key props that will pass and and the first one we're gonna cover is called exit and what we're going to do with exit is we're just going to set the opacity to zero so let's save this and see what happens now when we select a product or an item it's going to fade out and then it's going to transition but it wasn't really all that smooth and if I hit back to products it switches the route but nothing ever happens here and this is because in our idj s which is our products screen we aren't telling it to do anything so remember when I passed in the anime presence we are required to always define an exit transition every single time so what I can also do in the products here is I also want to define an exit transition so let's take the parent div and switch this to motion div and in our product component let's also give it an exit prop with the opacity set to zero don't forgive it also needs to import motion from framer motion and now if we save this and go back to our products screen if we click back to products it's just going to fade out so I click here it's fading out the index components and then it's loading this one and then when I click back to products it's going to fade out this product component and then load the an XJS file all right sweet so it's working but it doesn't look pretty because in terms of when we enter a component it's just popping up right away and there is zero animations there and that's fine we're getting there we've just defined the exits transition only and so our exit transition is just a fade-out transition now to define an animation when we enter a component there are two props we need to learn about one is called of what is going on okay so one is going to be called enemy and the second one is initial so what animate means is we define how the animation should look like and so it kind of defines the final state of the animation so we could just try it defines animation and for initial what this defines is the initial state so defines initial States of animation now an example might be is if we set the X to 60 and this means in terms of moving it left or right we'll set the X to be the starting point of 60 and then when we animate we want it to animate to 0 so it's going to go from 60 pixels right or left and it's going to animate to zero so this is defining the animation and then the interval is defined the initial state or starting point of animation and then finally we talked about exit which just defines when component exits all right so these are the three key props that we'll be working with animate initial and exit a quickie example is we might also do this where we set the initial to 0 and then we accomplish this and we'll set the animate to 1 and this is going to create a very basic fade out and fade in animation so when I click this it's going to fade out and load this screen mind you we don't have any animations on this product screen but now when I go back to products it's going to be a very seamless transition it's going to fade out and then fade in the NX component all right so you can see when we jump to this screen it has that forceful jump to it and it's not you know it's a seamless transition versus when we click back to products we are defining the initial and the animates of this NX component but that's really boring and that's not what you want to do let's go ahead and erase this and what we can first do in our parent div we can just write initial is going to be just initial and animate is just going to be animated now we can work on our card animation and what we want to do is we wanted to have a fade in and up animation to it so when we load this page or simply go to this page from another route we want it to fade in and up with these cards and also add a stagger effect just to make it look a little nicer so what I can do here is I can work with something called variance which allows us to write our animations in a variable and then pass it in so it also allows us to define unique names for our animations but what we're doing is we're setting initial to initial animate to animate so that isn't really all that important to us so I think it makes a little more sense bar to describe it so what I'm going to do is set in motion dot div okay that's not the right one let's do a motion div here and then I'm going to write variants so this allows us to define the names of the states of our animations so with this variant I'm gonna pass in something called fade in up and fade in up isn't anything yet but we're going to define that here so with fade in up we are going to define the specific animation so that we can reuse it what fade in up is going to be is going to have an initial which is going to set the Y to 60 the opacity is going to be set to zero and then for our animate on where we want it to enemy two we're going to set the Y to zero and we're also setting the opacity to one we're going to give it a transition which allows us to pass in several different configurations one being a duration and this just defines the length of our animation so we're setting it to duration of 0.6 and then one of them is going to be ease and we're setting ease to easing it's at a common here so that we don't get an error and we haven't defined easing but we can do that up here so we're going to define easing as the following easing curve I'm going to set the first one to point six then negative point zero five followed by a point zero 1 and then a point 99 let's save this and if we preview our project and refresh we can see that the two cards fade in and up but it doesn't have a staggered effect now to create that staggered effect what we need to do is we need to wrap the component that has the variant fade in and up with a another variant of staggered so this means that the div with the fade in and up animation needs to have a parent that has a staggered variant now let's define what a staggered looks like so we can do a Const stagger and stagger is going to have an enemy and this enemy is going to have a transition and within the configurations of transition there is a property called stagger children and this allows us to stagger the children and we're staggering the children by 0.1 so this allows us to run the first animation of our card and then wave 0.1 seconds and then run the second like I mentioned we need to wrap the parents of the variant with the fade in and up so our parent is the product row if we select product row here we can switch this to motion dot div and we can pass in a variance and set this to stagger this will stagger anything that has an animation inside of it so any child inside the product row class is going to be staggered back in our project if we refresh we can see we have the same fade in up animation but we have a stagger if I were to open up the console we can look for the product row and we could see the product pro class which has a staggered variance has two children these being both the card one and cart two so it's going to stagger these animations as they fade in all right that's sweet so if I click on proteins to go to the protein product details section it's going to take us here and it doesn't really have any animations here but that's fine but if we go back to products we can see that the fade and up animation works just like we want it to work let's go back in our project and one thing I also want to do is we can also add animations without necessarily needing to use the variants and to do that we are going to add an animation to our image so let's switch the image to motion image and let's set the initial to an X of 60 and we'll set the opacity to zero now this is describing the starting point or how we want the initial div or image to be s we want it to be at a position of X 60 and have an opacity of zero and then we have animate which animates to a certain section and so we want it to animate to zero and we all just want to set the opacity to one let's save this and if we preview you can see it has like a little jiggle on the image but we can't really tell it's going on just because of the fade and animation is really taking up all of its time we can add a transition prop here and this transition probables to pass in a delay and we can set this light to point two now we can see that when the animation fates ending up the images also fade to the left so they slide in and fade to the loft perfect so we learned how to use variants to create our own animations we learned how to use a stagger and we also learn how to pass in props so that we can define animations within the gif or image now that I want to work on is the animations for when we jump to the new route which is the product details section so when I go to the product I want this screen to animate but we're first going to work on is this image right here let's go back in our project and jump into the idj yes and inside the product component what we're going to do here is we are gonna look for this image so where is it this image right here we're going to set a motion that's the wrong way motion dot image here and we're going to define its animations so for our animate we want this to animate to a X of 0 and we want to have an opacity of one I think it's always best to describe the initial first honestly just that it could be easier to read so initially want this to be set to X of 200 with an opacity of zero so let's say this in preview so what's happening here is being faded out and then it fades in and slides to the left if we go back to products and select a product we could see that the image does exactly all you want it to do but I feel like it happens a little too quickly so we can add a transition here and we can set the delay to point two and I'm saying to the number of point two not to point two so let's save this and it's the same effect it just initiates or happens 0.2 seconds after when the component loaded let's go back in our project because now we need to start animating this entire section here to do so what we're going to do is I want to copy and paste in the fade in up B stager and the easing let's go ahead and copy all this and paste it into our idj s and truthfully this isn't the proper way of doing it what I recommend is to create an animations folder and/or file and then have all your animations in there and then simply enter and then simply import animations to be used across the entire application in our case we are just learning how to do transitions so this isn't really important to us all that much but if this was a production project or you're working on your own project I do recommend you to have your animations in a separate folder the only thing I'm changing here is the stagger I want the stagger to come in a bit quickly so it's going to be point zero five rather than 0.1 let's scroll down here and the first animation I want to work on is the back two products I want this to fade in and up so looking for the back two products here we have its div above the eight class or the a tag we're gonna change this div to a motion div and we're gonna pass in a variance and set the variance to fade in up let's save this and what should happen is it should fade in and up so let's refresh it's taking a while to refresh let's go back to products and then click on protein okay so it didn't work and I think that's because in our parents we haven't defined initial or animate so initial is always going to be set to initial and animate is going to be set to animate now the reason we do this is because we're using variance variance allows us to define different or custom names for our different animation States in our case we don't care about that in this project because we aren't interacting with anything so if this was like an open and closed menu and they have an example for that in the documentation you would set like the anime to open or you would set the initial - or try to exit - exits and so you have you can create just different names but the default wants or animate initial and exit another thing you can also do is if you want to the exit to be the exact same as the initial so if you want something to slide in and then we wanted to exit or jump to a different component you want it to slide back to its original position you would switch the initial to exit and then you'll justify an exit so both initial and eggs that would have the same styles or the same animating States in this case we don't want that we want to just initial to initial and animate to animate since we aren't changing the names of our states so keeping it like such now it should work alright refreshing the page back to products does fade in and up we also need to do this every single Dom node or element that we want to animate so let's do that scrolling down we have the protein I'm going to copy motion dot div with the variants and just simply paste them in here this will now fade in enough for protein like so and then we could do that to the h1 and the p1 or the P tagging of the feet one this is not a car so motion dot h1 with the motion dot p1 and then simply paste in the variance for the h1 and the P and if we preview alright cool - doing that it's working perfectly so we also want that for additionals and additionals has a div so we'll switch motion dot div and then we'll pass in variants for our additionals we also want to do the same for the quantity price so the quantity price motion div for the class name quantity price with the variance added so now the quantity and the price section is going to do the fade in and up animation and we also want the same for the bind row so let's go ahead and do that so lots of motion divs but this means that we are animating each single elements so if we fade in and up for every single one this is cool if we go back to products and then click on the protein it fades in and up perfect it's really cool but we can add a little more flair to it and that is due to our stagger so if we look for the parent of these entire elements that parent is this inner class so let's switch this div right here to a motion dot div and we are going to pass in a variance of stagger and this will stagger each child element that's nested inside this in our class go back in our project if we click on the way vegan one we can see that they all fade in and up and it's all staggered so it looks a little nicer in my opinion all right perfect so we've got really nice animations from one page to another page and I think it works really well one thing I am seeing here is the background of this image is popping right away and it's not fading in so it's not the prettiest to fix this we can look for the class name of image and we can add a motion dot div here and we can define its own styles so the initial is going to be set to an opacity of zero and then we want it to animate to an opacity of I didn't spell it past city correctly don't forget them why so now what happens is when we jump into the products it's going to fade in the background so it's just a little nicer this was creating animations within XJS and I do want to highlight one more thing within framer motion they also give you the option to work with gestures this means tapping hovering dragging moving around all those great stuff so I just want to highlight two of those gestures which are hover and tap so if I go into the end XJS we have the card here what I want to happen is when I hover I want it to scale up and then when I click I want it to scale down and so it creates a sort of bounce effect which is pretty cool in our motion div with the class name of card we are going to create wild hover and this means while we're hovering on this div we want it to scale so we want it to scale to a 1.05 and then while tap which means when we tapped on there we want it to shrink so we're just gonna set the scale to 0.95 let's save this and then if we go back in our project if we hover on our cards they pop up or have this scale to 1.05 and then when we tap on it it shrinks and then once the tap is complete it goes back to its original size so you can see it has this sort of like click balance effect to it which is pretty neat alright so that was page transitions with next j/s using frame or motion I do want to use more framer in the future whether that be frame or X or frame or motion or just the framer library that is involved with react I think it's all pretty cool I think it's a really cool animation library in terms of beating GCF I am not entirely sure about that just yet because I haven't used it as much as I would like but expect more framer stuff in the future because this is definitely a really neat tool and also expect more next j/s because I really like it the last thing I do want to highlight is the fact that the API that we were dealing with so the API where I'm getting this information from is a dummy API and I did use the JSON or fake JSON server I would recommend you creating your own data and you can either do it on local machine or simply use the JSON server dummy that I use but again you gotta remember that this has limits this isn't the perfect way of doing it because there are limits to your requests and so if you clone this project and you do get errors dependent on the API that is because there are limits to this so you can only limit your request and it's really not the best way of doing it if you're creating your own project and you just want a quick API just so that you could test the server-side rendering you can just go here and just create your own JSON server it's really easy it's just three steps and it's it's nothing to install like a mentions here if you did not want to use the JSON server you can just find other fake data servers or you know API is out there that can help you out that's gonna do it for this video if you did enjoy please like and subscribe because that really helps me out and be on the lookout for more videos like this as always have a wonderful day

Channel: Wrong Akram

Views: 56,315

Keywords: javascript, page transitions, code, design, ui ux, ssr, framer motion, framer x, next.js, react, sass, api, json api, animations, js, js animations, next.js animations, next.js transitions

Id: zIDpZi-36Qs

Length: 28min 2sec (1682 seconds)

Published: Sun Jan 05 2020