Page Transitions with React Router and Framer Motion

how's everybody doing my name is a chrome khalid and in this episode we're gonna take the time to figure out how we can create page transitions using react and frame or motion now the transition of particular is one that's been requested quite a few times and it's one that kind of has a seamless effect when it goes from one page if it goes from one page to another page so if you think of an image that changes size you want it to click or you want to click on that image and you want to change sizes on that image better explanation is what you see on the screen now so you can see that it kind of changes the position of the images as well as a skill and it's a pretty seamless effect now this is a very popular effect and a lot of high quality websites do use this kind of effect so you could possibly turn your garbage site into a really cool one I don't mean to call it garbage I'm sure it's amazing so if you're excited let's go ahead and jump into the code where we'll break down the project files and get started now before jumping into the code I need to discuss how this effect kind of works now it isn't a perfect effect in terms of getting this image from point A to point B where it's fullscreen simply because we are transitioning pages as well using react router we're switching over to a different page or a different directory right now we're on localhost 3000 and then when we click on the image it takes us to local 3000 for slash model /yes me in thought ik which supposedly is the model's name but I am NOT a hundred percent sure her @ was not available but it seemed to resemble this which was her name anyway so the way that the effect works is it's not so much the same image being translated or transformed in terms of scale and position it's more of the fact that when we transition to this next page we are replicating the initial screen and then we're transforming to this final state so in Freya motion we have three properties that we primarily focus on which is an initial and animate and an exit and so the initial here describes or kind of replicates how our home page screen looks like and then the anime will then animate to its final stage which looks like so so the better described I'm gonna head over to our XD project which is where I designed the initial mock for this and what I mean by this is that in localhost 3000 which is the left screen we've got this image here and then in the initial state of our second page we have the exact same image which is this down here the only thing is we're serving this image initially and then once the page has loaded or finished loading and then transforms into the position that it's in of course it's not like this but that is the general idea the idea is our initial state of the second page is closely resembling the the exact same way that the initial screen looks like so it's kind of copying how that previous screen look like and then taking action on how it's how it acts and to better describe or demonstrate this what I'm going to do is head over into fjs and we have this initial false on our animate presence and what this means is that whenever we have initial false that means anytime we refresh the page or load the page without transitioning into the page from another directory or another source it's going to disable any initial animations so in this case if I switch to this screen here we have that animation occurring but if i refresh the page and I continue refreshing it's just going to serve up the image without any initial animations to get rid of that will get rid of the initial false and now every time we load this page you can see it's going to have that effect which you know kind of looks like it's transitioning or kind of you know loading and then transitioning to its final state now you could have this this is definitely possible you could have it but in terms of kind of getting the ultimate experience in terms of full-on page transitions I'm going to leave it as initial false just because we want our initial state and our final state which is the different screen here but again it's totally up to you I've seen a lot of websites where they have that exact same transitioning occurring and they do leave you know this effect where when you refresh the page or load the page itself the animations occur that's from the up to you and it's all preference so I just wanted to clear that up in terms of how this actually works another way that we could take a look on how to achieve this effect is the following right now the initial animations are all coming from the second page another way to take a look at it is if we leave the second page as is but then all the animations come from the first page and we execute all the animations to when this page is exiting using anime presents like I mentioned you have enter or the initial you have exit and animate controlling the exit on the first screen we can determine what should happen before loading the second screen and we do that just a little bit on the text on the bottom so if we go back to our project head home you can see that once I am ready to exit or move on to the next screen the name and this longitude largest longitude latitude which represents the location of our the image of second which I believe this Orlando Florida it's going to disappear when we're exiting from the initial screen so take a look now when we click that disappears then it is ready to transform to that next page and in the next page initial animations which is this start to animate so that's kind of how it works it's pretty simple it's not too hard to do another thing that I wanted to discuss is just changing the image size here will not have any issues in terms of the animation so right now if I switch this to a width of 600 and a height of 300 it'll look like so but don't worry transitioning to the next screen would still look fine we'll click it and it just transforms like so let's do that one more time perfect so changing the width and the height we could do whatever we want and we will be fine with the end result so now that that's out of the way let's go ahead and head over to the github repo where we could clone the master if we go on to the final but if you wanted to follow along go ahead and clone the starter files and then from there we'll run npm install and npm run start what i'm going to do is just switch our branch since i have the master branch cloned I'll go ahead and write get check out starter and that will switch me over to my starter branch and then run and run start now once that's done we'll go ahead and close out of the console and if we go to our project what should happen is it should just transition to the next page immediately without any additional animations which it does now this is only using react router and react but here is where we're going to start adding framer motion to add some page transitions let's go ahead and go back in our project now I already am providing the JSX the react router structure as well as the sass so we're not going to focus on that you can also jump to your images where we have a compressed version and a web pea format if this was going to be a production version such as going on either Firefox or Safari or ie we are going to need to have fallbacks for these web PE or any browser that doesn't support web p formats but in our case we're working in Chrome and this is just to learn page transitions and not necessarily web P fallbacks so if you want you can switch to F P fallbacks to push it to production one more thing that I wanted to mention is inside of our home page let's go to the components of the components but the pages folder we have a home page which represents our home page here we do have a progressive image components which is being called net from react progressive image and what this allows us to do is first load up a lower resolution or lower quality version of our image and then once that image is ready to be loaded or is done loading we're then going to load our higher quality image this is part of the whole progressive loading to where we can load our web pages a lot faster without needing to have that ugly looking you know 2000s effect of images loading so this is what progressive image represents now to get started with adding page transitions the very first thing we need to look at is using animate presence with frame emotion what animated presence allows us to do is it allows us to capture a component when they're removed from the react tree so when a component is ready to be unmounted or removed we can then animate out that component which allows for that effect of page transitions to get anime presents working we're going to need to rap anime presence in our app je s we are wrapping the two routes that we have set up so we're going to need to have it as a parent and we can do it fairly easily so the thing that we need to first bring in is anime presence we'll go ahead and import and make presents and we're importing this from frame or motion if you are unfamiliar with the react router I do recommend you to go watch a basics react router video and I'll link that in the description there's a lot of great ones out there just get an understanding of how it works you can also visit their website for their documentation but essentially what's happening here is we're wrapping our entire application in a router which router is based off the browser router and then we have a switch statement which is going to render these different routes which returns these components dependent on our path so if we're on the path of the home which is a forward slash that's going to render our home components which is located in the home pages directory if we're rendering this model and we do have this ID which allows us to enter the different names if we're going to have you know hundreds of models set up we can sort of do a dynamic to where it changes the path dynamically and then we render the data according to our model page but since our model if we go to this path and type in the model name which is the estimate yes mine thought ik that's going to then render this model component and then the image details are just props being passed which image details represents the width and the height simple as that so we've already got anime presence being imported let's go ahead and start using anime presence so use it we're going to return it within our route so we can add animate presence here and we're going to take the closing tags and add it at the end of our switch statement the first prop we're going to pass is initial and we'll set that to false and again initial false disables the fact that animations will occur on a page if the page is refreshed or accessed for the first time through that direct URL and it doesn't necessarily new the first time it can be multiple times but if it's coming from an outside source or directly enter from the URL initial set to false will disable any of that animations will only occur if they are coming from a direct link so that is the cool part there and then we're also adding exit to before in turn and it's pretty cool that vs code has already given us information here so let's just read this if sets are true animate presence will only render one component at a time the the exiting component will finish this exit animation before entering component is rendered so what this means is that we're not switching to the small screen or we're not gloating a new component unless the first component which is our home one is exited completely so it kind of just describes itself so exit before enter will not allow any additional components to enter unless the exit component or the first component is completely out or unmounted from the react tree we'll go ahead and save this and this is all that needs to be done in the app j/s just setting up anim presence adding the props that you would like to add and then we're kind of just done here we don't need to use the app j/s anymore we can go ahead and close out of that we did have additional animations add it to the home j/s such as when you hover on the image it does kind of zoom out but it only zooms the image so let's add that let's go back at our project here and then we can scroll to the top now I could change this where we should import react from react it doesn't need to have that asterisk and now we do need to import motion from framer motion and we'll do just that once that's imported what we can first work on is just creating that hover effect on our image to do that we can go directly to our image here and then we'll need to turn this image to a motion component and to turn certain tags or anything to emotion components will just add motion dot and then describe or add the element property here or not property the element name so if it was an h1 of the motion h1 a David Lee motion div etc right now we're working on the image so it's motion image now the effect that we had is only occurring and a property that framer motion has is while hover what we want to do is just scale the image by 1.1 originally images are always scaled that one adding point one will then increase the size just slightly so if we take a look here hovering on the image is increasing this skill however I do have a huge problem with framer motions default easing and it's just way too snappy and bouncing and maybe that's on purpose but you know we don't need to deal with that and here's what we can do we can create a variable that then houses all of our easing and duration we'll just call it transition so Const transition is equal to the following we'll go ahead and set a duration set to point six and then our ease is going to be the following and we'll use an array we'll set this to point six point zero one negative point zero five and eight point nine and for us to use this ease we could just add it right here we can add transition and then just pass transition and then the transitions that the image will then use is related to the transitions variable so the duration as well as the easing back in our project if we hover on our image now you can see that it does use the transition now I do like this transition for when the image zooms in but I don't necessarily like it here from when we hover it doesn't really work all that well I prefer something else and so a typical default of in Inez is sort of like an ease in he's out type of thing and so we could just use the following which is going to be 0.4 3.13 and then point two three and we could erased it negative and in the final is going to have a point nine six so we'll save this and then when we hover it's just a lot smoother for hovering on an image which works a lot better if we click the image it's not going to transition to the next screen because we haven't really find the exit properties just yet and I'll get to that in a sec so clicking on the image did change the URL and the only way to access that URL is if we're to refresh if we go back and head home we can't move just yet we can only refresh an oval and take us home and this is again because we haven't defined what our initial exit and animate props going to represent we don't have an animation such as you know fading out or anything we're just going to define them and then it would allow us to transition those pages but we're not necessarily ready to transition just yet let's go ahead and go back into the code and then if we scroll to the bottom right here we have this information div which represents the name and the location of where the image was taken so what I did in the final version was that I sort of just faded these out when we changed to a different page and to do that we'll turn the parent which is the information class name to a motion component and then from here we'll add an exit prop which when we exit out of this page we want to just fade it out so we're going to set an opacity of zero we can also use the same transitions we have used up above for our image and we just add transitions equal to transition and save this let's go back in our project now let's head over to the home page and I had to refresh there to go back so what should happens if I click and this should fade out go ahead and clicking the image it fade it out and then it transitioned over to the next page and that's because we've defined that exit property we haven't defined any exit property here on this screen so going home is always going to require us to fade out so clicking will then fade the image or sorry let me go back clicking will then fade the text on the bottom and then allow us to transition like so if we are to adjust the duration to like three seconds then it's going to take quite a while for this to fade out in the transition and you'll see that here so we also are adding that residence at the image we're just going to zoom in slow but that's not what we're talking about clicking the image will fade out the text on the bottom and I'll take three seconds once that three seconds is done or once the animation is done we're then switching to this page okay so there's a lot of cool stuff that you could do easiest option almost always is just sort of like a fade-out effect and then we can also add that to kind of mean everything really right if I were just to fade out this container for an example let's go here so motion dot div and then for our container motion dot div and if we're to just copy what we did for our text right we added an exit of opacity zero and a transition of the transition ease this is the easiest way that you could kind of have like a fade out and fade in effect for your page transitions so clicking is just going to fade out that screen and then load this but of course it's not that smooth right because we haven't defined any motion components within the model yes monadic page but if we do find defying any of fading in animation it will be the initial which initial will be set to zero and then the enemy will be set to one of the opacity and that will just give us that basic fade out effect so you can do very very easy page transitions honestly really really easily which is really neat with favorite motion so we're going to reset that back to where we don't fade out but then now we're going to switch gears to work on our model j/s page and they will add animations here now in our model j/s page what we're going to do is just primarily work with this image first so let's switch gears we're going to focus on making sure this image kind of fits how our first screen looks like what I'm going to do is just set an opacity of zero on the name on the location on the MUA and MUA or i thought i was more the whole time i don't know what that means but MUA represents makeup artist I believe and then this is her at the makeup artist for this model so I'm going to hide everything and then focus on primarily getting a very smooth effect with the image and then we'll slowly start animating everything else so let's do that go back in our project and very first thing we need to do is import frame or motion so let's actually do that going to import will say motion from frame your - motion and then here what I'm going to focus on right now is just hiding everything and focusing on our main image so I also want to make this parent a motion component and that will define our initial animate and exit props because we are going to be using variance and if you don't know what variance are don't worry about it we'll get to that in a sec but just work with me here real quick the parent is going to be a motion component so we'll go ahead and make this a motion motion component and then we're going to pass some props so initial here we could define really whatever we want and then it kind of describes the initial animation so to give you an example this is not what we're going to do in our final state but to give you an example of what I mean a past city will be set to 0 and then the animate will be set to 1 o Cassity so what's going to happen is that when we transition over it is going to fade in so transitioning the entire screen here just faded in let's go ahead and go back l fade in which honestly is pretty cool I mean you can do that if you want that is basic we're not we're not about that we're not going to have any effect on the entire parent we're going to have transition effects on the individual elements so I'm going to set it to where there is no effect at all but then it's going to allow us to transition back and forth because we do need to find defined that exit prompt so initial will be just set to initial animate will be set to animate and exit will be set to exit now some people choose to you know change the names of these and we're using variants you create a variable outside of the components and you define an animation now typically variants are very useful when you're working with multiple animations that have the same effect and you'll see that here in a second when we animate these letters but an option that you could do is you could change the name of exit to out and you can change the name of initial to in and this helps certain individuals in terms of you know making things a little bit simpler for them for me I don't like that I like sticking with the same naming conventions as an initial animate and exit I think this is just a easier way to memorize these but again you could change these to whatever you want in order to best help you understand so now that that's out of the way if we go ahead and save it like so we are then able to just switch between the two pages pretty easily I mean it works right there's no special effects here but what we're going to do is just set the initial of opacity 0 to everything except the image that we could primarily focus on working with the image and I'll do that right now we have this div of top which represents the top half and then bottom which represents the bottom half which is our image what we're going to do is focus on the top half right so let's go ahead and grab this details div and then make it a motion component see that will make details of motion component so motion div and then we'll set the initial to an opacity of zero and this I don't know how to spell motion make sure you spell motion correctly and if we take a look what should happen is that this top half should fade out and it didn't do that and that's primarily because I remembered telling you guys in the beginning that the transition only works when you actually transition from one page to another and so when we actually do that it's gone but if we refresh our elements are back and we don't want the animation to execute now that is primarily because if we go to I freakin hate on my node modules folders to opens out of nowhere if we go to app j/s and we have this initial false here primarily the reason why so let's remove that as we're working through because we are going to need to test our animations frequently so let's set initial to false and now we should be able to refresh our page to see the effect so if we refresh you can see that the initial opacity is set to zero hiding our element we'll do the same for the name and the scroll form or actually scroll for more isn't really in the way so we don't need to worry about that but for the name I'm going to go over to our model right here the class name of model and make this a motion component ocean div and then do the exact same to where we set the initial to an opacity of zero and this will just hide the name as well so that we could focus on this image so to create that effect we need to set the initial of this image down here to the exact dimensions of this image here so let's work on that let's find this image here and it can be found here in the frame single so what we have here is in frame single we have thumbnail single an image container signal or single let's work on our thumbnail say single man I keep saying signal without of single but for the thumbnail single let's turn this to a motion hi yeah yeah yeah don't save let's turn this into a motion component and then we will set the initial to where we can get it exactly the same as how our initial or the first page the image looks like to do that we are going to set the width to what the exact same width of our first one and fucksakes node modules is just pissing me off I hate when it opens but um let's set it to the same width and height to do that remember I had in actually s this image details and image details being passed as a prop to both so in model we can use D structuring to bring in image details will bring in image details and then we'll set the width to image details dot width and we'll also we'll set the height to image with image details dot height and if we save it and take a look you can see that if we click it's going to grab the same width and height up the original image but it's going to push it down a bit let's go back home this is the home page and then this is the model page now we do want it to center because in our home this is perfectly centered vertically so to do that what we can do is for our Y we can set the initial to negative 50% and select that and then if we save and take a look clicking on that will then Center it perfectly to how our original image looks like you can notice the scroll form or only appears on the second page which is the model page another thing we would want to do is in our image itself is to scale it down to an image of one we also have the option to add a scale of whatever we would like so this is kind of not necessary it seems a bit redundant but I'll explain here in a second so if we add our scale to one point one and save that you'll see that since in our original page here when we hover it's scaling by one point one and then let's say that we're scale that one point one and we click it's going to kind of save that original scale which was one point one but then this kind of does look a bit odd when we hover if we click and hover off so if we click and then hover off then it kind of pops up in your face so you've got two options really you can kind of just set the scale to one or nothing and that way when you click and hover off it's pretty smooth in terms of the transition or you could have it to one point one so where maybe you expect the user not to hover off when they click so they'll click and then it will be perfect in terms of the scale so it's really up to you I'm just going to leave it at one point one for our example but do whatever you would like of your perfect so we've got that working correctly we can work on the animate which will then turn this image into that full-screen image and push it to the bottom let's do that right now we can select animate and here is what animates going to do we are going to set the Y to a zero and I'm going to take this one step at a time so that we could see it happening so when we refresh you can see that first it's going to take that position and then it's just going to slide it down let's go ahead and switch again and it will just slide down then we are focusing on the width we are going to select width and set the width to a hundred percent which will then stretch it out completely so selecting the image will then push it down and I hate to the frame or motion transitions let's let's fix that right now I'll do cons transition actually it's going to be quite similar to what we have at the home so we'll copy and paste this but then for the duration we're going to switch the duration to have one point four and then for the easing is going to be that original easing we wrote which is 0.6 0.0 one negative point zero five and the final one is going to be point nine let's scroll back down here and let's look for where we are working I always lose where I'm at right here okay so what we could do is just add the transition and we can add transitions similar to what we were doing before with the you know the transitions equals a transition but if we wanted to extend it will use the spread operator so here we can add the following we can say transition is equal or since we're using object notation not operationalization but since we're using writing an object it's going to need the semicolon it's going to be the following we're going to set delay to point two and then we're going to use a spread operator and just bring in transition so that we can use what we have transitions as the dirt such as the duration and the ease and then add delay to that perfect so let's save this and take a look all right sweet so clicking we transition to that which is perfect we're gonna work on the height though because the height doesn't seem quite that good what we're going to do for the height is it's going to be sort of responsive now this is a quick way to write responsiveness for when you're working with animations but this is not the perfect way by any means I would recommend you to find a hook or create a hook that determines browser or viewport resizing and then simply just have some sort of hook that runs and updates the for example and the height property here is going to update the number dependent on you know the browser size so definitely go find a hook out there but in this case an easy easy quick solution is just like window dot inner width if the window inner width is greater than 1440 then we're going to set the height to 800 otherwise we'll set the height to 400 again this is just demonstration purpose only I would recommend to use a hook like a resize hook or something to determine when a browser has resized and then just update the numbers on the height so we'll set the height to since we're working on something greater than fortune 40 pixels we'll set the height to 800 and we've got that perfect so let's go ahead and transition to this and this guy's a transition here and then the height will be 800 pixels but we need to work on getting her face as a subject and not her hair we could do that through this image right here the motion image we're going to animate the following we'll say we want to move the Y right so again similar so we have for the height we're going to say that window inner width if it's greater than 1440 then we are setting this to a negative 1200 otherwise we're setting it to a negative 600 and this is going to push the image up so that we could see more of her face like so it'll be a lot smoother here that is not what we want at all but let's see if we can we can fix that so we're looking at this right the window diner width if it's greater than 1400 we're setting this to a negative 1200 a negative 600 let's work on the transition and the transition is going to be the exact same of what we had up there so we could just do transition delay and then extend transition like so so we can head back here and then let's click on it and perfect so we've got the image handled correctly we can then work on the text and everything else to add the final effect awesome so again what we did was for our initial on the parent of the image we kind of replicated it replicated it to look like I don't even know if that's the correct verbage but we made it look like how it looks like on the home screen as an initial and once we load that page we're animating gets into its final state which is this let's go ahead and work on the text next and from there we can kind of conclude actually no we are adding additional framer motion effects such as when we scroll depending on the scroll position we're zooming in and out the face which is pretty neat so let's keep on going okay so with the text what we're going to do is use variants and what variants to do is I'm just going to read the definition it targets objects are useful for simple single component animations but sometimes we want to create animations that propagate throughout the Dom and orchestrate those animations in a declarative way we can do that with variants so a lot of the times when we want to work with staggering or multiple children will typically refer to variants and the reason we're doing that is because we have a name which is the model name here but we've got several children such as each letter and this creates a stagger effect now I know that there's some JavaScript libraries or a way to kind of D structure or a breakdown Mundi structure but it's break down a name or a string at a different letters but I'm not going to install anything or work me on my he means to do that effect I could just do that by just adding several span tags which is much easier so what we're going to be required here is to turn everything into a motion component which can take quite some time I already made the motion motion component for the model which setting it to a passive is you're just to hide it that's done let's make a motion component for every single span tag so I'm gonna just skip through here because this will take too long alright so once we have motion components for everything we are then going to work on our variants to create a variant we're going to scroll to the top and we're going to do two variants one variant is going to be called the actually three variants one variant is going to be called the first name the second variants going to be called last name and then the children is going to be called letter so let's go ahead and do a first name we'll do a variable called first name and it will be the following we will define the initial and the initial of all of our items such as the first name is going to be set to a 0 and in the animate will be set to a y of 0 and looking at and now having animate set to y 0 I don't think we need an initial let's leave it for now but we might be able to delete it let's do transition and what we want to do is we want to delay children which is going to be each letter by 0.6 where you want to stagger the children by point zero four and then stagger direction is going to be negative one which means that it'll go from right to left instead of left to right all right so to use this first name we're going to go to our first class name and we're going to pass a variance and set it to first name let's work on our letter next so Const letter is the following initial it is going to be set to a Y of 400 and then our animate will be set to a Y of 0 and then the transition will be the following durations is going to be equal to 1 and then we're going to extend the transition like so don't forget to add a comma between initial and animate and then to past the variance we'll pass it along each letter that we have so we'll say a variance is equal to letter let's save this we can also get rid of this initial opacity 0 that we had for you know just hiding it so we don't need that anymore and let's go back to our project now we got an issue we have a span tag here which is right here when you turn this one to a motion that span okay perfect so this tonic right here is in the way which for now it's fine but when we refresh you can see that the s mean the way it comes in it's coming in from right to left and because of that overflow:hidden on our parent you can see that it is kind of hiding behind something as it's coming up let's do the exact same thing from for the aortic or the last name but it's going to go now from left to right so to do that we'll copy exactly what we did for first name except we'll just change the name to last name and the direction to 1 leaving everything the same honestly let's go to the variants for our last class name and then switch it to last name and then for our span of each individual letter is going to get a variance and set that to letter like so and now you can see that it animates up in a very beautiful manner perfect again let's check out if we even need this initial let's go ahead and erase that we don't we don't even need that initial because we're animating to Y of 0 perfect what we're going to do next is do we even need y 0 I'm just experimenting let me see we don't even need Y zero because we're mainly using the variance on a parent to add a a sort of stagger effect on the children and we're not even animating the parents which is first-name and lastname so all the animations coming from each individual letter perfect well then work on the latitude/longitude and the makeup artist name and the scroll for more and I should conclude all the animations and then we'll add the effect for the scrolling so we'll scroll to the top to where we can find this details motion component and for the details of motion component it is going to have an opacity of zero for the initial and then a Y of twenty so that we push it down and then we're gonna animate to the following here's what we're gonna do we're gonna set the opacity to one and a Y of twenty and then we're adding a transition of the following we're going to give it a delay of 1.2 and then it's going to extend what we have for the transition transitions not defined so all right perfect let's go back in our project and refresh awesome so let's go home and then click on the image perfect let's do it one more time so it seems like this is not animating up the details section and that's because the enemy is set to 20 instead of 0 let's go ahead and try now so you can see that it fades in and up now awesome last thing we're gonna do is a scroll for more and the scroll for more is a different component here we go again this node modules to access that we can go scroll for more j/s we can import motion and we'll import this from frame or - motion and then what we're going to do is just turn scroll form or is parent div which is this class into a motion component by writing motion div and then for our initial we'll set the following opacity of zero and it's going to be the exact same that we had for the details the Y of 20 and then it's going to animate to the following we are going to set the opacity to 1 and the Y to 0 and the transition give it a delay of 1.2 and then it will extend what transitions is like so in our transition isn't defined but we'll just copy and paste the variable into scroll form or now typically you don't want to keep copying and pasting or you don't want to write no in our case here we wrote transition like three or four different times what we'll do instead is probably just define it in our parent or in the app j/s and then share it across each individual component you know passing it down as a prop but we know about that already and it's not necessary in our example here because we're just making mainly working on fare motions transition effect but you don't want to keep copy pasting transition just create one definition of the transition variable and then pass it down to each child that uses it so let's go back in our project now and let's switch pages and everything animates beautifully last thing we're gonna do is make this image zoom in and out depending on our scroll position I also want to do one more thing so now when we transition to this page here I can already start scrolling and it does mess up the effect a little bit it's not really all that ideal what we want to do is just lock scrolling up until the animation is done and then allow the user to scroll this is definitely a preference some people prefer us and you'll don't so just keep in mind you don't necessarily need to do this if you don't want to let's go in our project now and we're going to be working in our model j/s what I'm going to do first is work on adding a scroll effect to the background image which allows us to zoom in and out to do that we're going to utilize two things we're going to use the use viewport scroll and use transform from frame or motion we need to be in model j/s import use transform and use viewport scroll let's scroll down to the model component and to use the scroll why what we're going to do is use the structuring to bring in scroll y progress and this is going to use the use viewport scroll and now these are all part of favorite motions motion values and the use viewport scroll what's what it's going to do is return a motion value that updates the viewports scroll depending on where it's located so I'll return the Y of our viewport scroll like the position and it will start from a range kind of so if we're at the very very top of our viewport is going to be zero and if we scroll to the very bottom that's going to be one all right so then what we'll do is the following will create a variable in our case it's going to be called scale and we'll use transform and we'll provide a different ranges so writing it out makes a bit more sense I'll say skill he's going to use transform and let's see what transform tells us it tells us that it's going to create a motion value that transforms the output of another motion value all right so we'll use transform and the first argument we pass is our scroll Y progress so this is going to be a number between 0 and 1 and this will determine if we are done scrolling or not and then with frame emotions use transform or kind of their motion values set up we are going to pass two arrays now the first array is going to be a number from 0 to 1 and this kind of just represents where our start and finish kind of is so our start is at 0 our finishes at 1 and this is true based on our scroll white progress and then the next thing we pass is another array which provides sort of the values that we want to give so since we are animating the scale we want to set the scale to 1 when our squirrel white polish is set to zero and then when our scroll white progress is at one we want to set the scale to 1.15 all right and I'll give you another example with opacity here in a second so to use this we're going to scroll all the way down to our motion image let's see if we can find it right here and then we're going to pass style and this is just a style prop but we're going to update the scale with this scale variable that we provided up at the top so let's go back in our project now and you can see that once I start to scroll it's scaling this image here to the end result which is at 1.15 so you can see as i zoom in and now it's killed it now we can do the exact same thing with opacity right so if I were to turn the opacity here and then scroll at the top we'll leave it at a called skill actually we won't because we don't want to confuse people so if we wanted to do opacity will turn the names to opacity we'll leave everything the same scroll white progress is either zero it says number between zero and one and our ranges are between zero and one but then the results are different here we'll say that we'll start at an opacity of one and once we start reaching the end of the viewport scroll or scrolling down we want to start fading out the image which is an opacity of zero let's go back in our project now that we're at the very top it's an opacity of zero and you can see once I start scrolling it's going to fade out the image all right so we've reached the very end of our scroll that's going to fade out the image completely and once we reach the very top that will fade in to an opacity of one so it's a really neat effect because what we could do is we could scale the image and in this name we get to fade it out as we start scrolling and once we've scrolled past that name with you just fade it out completely which gives it a really neat effect I'm gonna control Z all of the changes that I've stitched so that we set it back to scale and then once we start scrolling it's going to scale the background image very easy to use very very very handy last effect we're going to add is not allowing the user scroll until the image or the animations are completely done so to do that we are going to use a few things we are going to import use effect and use state from react will say use effect and then use state all right now scrolling to our components here let's create a new state and the state's going to be called Ken scroll and so this is going to be true or false if the user can scroll or or not so we're going to say set can scroll and we're just going to use state so initially we're gonna say that the user cannot scroll so we'll set that to false that's weird I don't know why it's blue we'll figure that out here in a second but then our use effect all right let's get that imported it is going to be the following now in framer motion we can create a or use a callback that runs every time the animation is completed and we'll just add that to our parent so to do that what we can say is on animation complete it will then execute this function so we'll say not function but we'll just update the state will say set Ken scroll will update that to true and when set can scroll is updated to true it is going to allow the user to start scrolling now here we'll just have an if statement and say if or we'll say Ken scroll is equal to false we'll do the following we'll grab the document that's query selector and we're trying to grab the body but we'll just add a class class list dot add and we'll add no scroll and this is just a simple if-else statement and over here we'll honestly stop remove no scroll so no Scrolls already of class I created in CSS or in SAS that will not allow us to scroll the document on the body which sets the overflow why - it didn't I believe in what it is and then our depend is going to be Ken scroll so if Ken scroll changes its going to then or the Ken school dependency right here if it updates then it's going to allows us allow us to run the use effect that makes sense so let's test that out actually right let's go back home and then we'll click the image and then we're trying to scroll and we can't and then once the image is done we get scroll it happens the same if we refresh we can't scroll once the image is done because start scrolling but to finish everything we go back to app day s where are you after yes and we set initial to false so that we can only have a page transition when we're going from one specific route to another so we can scroll unless the animation is complete and this also helps with if we don't have any animations to run at all for example if we refresh no animation runs but then we can still scroll all right so that is I believe everything I think that's gonna do it here one last thing that we could do is if we don't want a full screen here we could just add a container fluid or we already have fluid but if we just get rid of fluid and save that then it's going to be right here so we could still have that a same effect we're just going to move down here so it's just a different look it's all really preference on what you like the most I think I prefer a container or the fluid which will stretch it out across that's gonna do it for me if you did enjoy please leave a like don't forget to subscribe and the next video we're gonna take a look at 3GS shaders so that we can add some wobbly effects some you know different cool effects on this image so take a look at that next week that's gonna do it for me have a wonderful day guys stay safe out there take care

Channel: Wrong Akram

Views: 62,752

Keywords: javascript, react.js, react, github, code, css, jsx, ui, ux, awwwards, javascript animations, framer, framer motion, page transition, page animations, js page transition, animate website

Id: 3QrkCmsfewM

Length: 52min 23sec (3143 seconds)

Published: Sun Jul 05 2020