Framer Motion (for React) #14 - Modal Animation (part 2)

Key Takeaways

okay then so now we have this backdrop showing after a few seconds and that's animating in fine it's fading in what I'd like to do now is animate in some kind of modal and I want this to drop from the top so inside this div right here this backdrop let's create another div which will also be a motion component and we're going to apply some variants to that as well so let's say motion div like so and let's also give this a class name class name and set that equal to modal now inside I'm going to do a paragraph tag first of all and we'll say want to make another pizza question mark and underneath that we'll have a link to the home page again so let's use the link component which we imported remember at the top up here from react or outer Dom and this link is going to go to forward slash that's the home page and inside this I'm just going to create a button that they can click and that will say start again or something like that doesn't really matter anyway now we have our content right here if we take a look at this after a few seconds it should show but it's not going to be styled just yet it's just looking a bit pants at the top over there so let's now add some CSS first of all to make this look at least a little bit respectable so let's go to index dot CSS and down here again I'm just going to paste these in and walk through them so remember we called this mold or this class and we're targeting that right here and we're saying the max width of this model the pop-up itself is going to be 400 pixels the margin is 0 top and bottom auto left and right and what that does is automatically assigned margin to the left and right all the available margin left on the page after it takes up this width so it means it's going to be a central modal now and it's going to sit in the middle with automatic margin left and right of it the padding of the modal is going to be 40 pixels top and bottom and 20 pixels left and right so that the content inside has some breathing room the background of the model is white border radius 10 pixels so we get soft corners and text align in the model is going to be to the center so all the text will sit in the center of it now the button inside is going to have a text color or like a deep gray and also a border call of a deep gray the font weight is bold and the margin of the button at the top is 20 pixels and the paragraph tag which we also have inside the modal that is going to be dark green color and also bold font weight so let me save this now and come over to this again and now we can see this looks a bit better so all we need to do now is animate this and what I'd like to do is animate it from off the screen up here down here so to do that let us first of all make some variants for this so I'm going to come to the top and create a new constant called button and set this equal to an object or not button sorry we're not making variants for the button it's the modal so let's set that equal to an object and inside we're going to have a hidden property first of all and this is going to have a y-coordinate to begin with of minus 100 VH so viewport height not 110 100 okay so it's going to be up right at the top up here off the screen now we also want to set the opacity to begin with to be zero so it's not going to show at all to begin with okay now we also need another property and that is going to be the visible property so visible and this object is going to say okay bring the Y position down to 200 pixels so let's say 200 pixels like so so it's gonna go from way off the screen down to 200 pixels down into the screen and also we want the opacity to be 1 like so and I'm also going to add a transition delay so I'll explain why in a second let me just first create this delay not 0.5 seconds and that's because then this will start animate first of all and start to fade out the background to this kind of deep gray color or black semi-transparent black and then not upon 5 seconds later after it starts doing this this is going to pop down okay so it's kind of a nice effect okay so we need to apply this now to this thing over here so let me say that the variants are going to be equal to modal and we need to define the initial that's going to be equal to hidden that's what we called this thing right here and in fact we don't need to do this because remember propagation and we've already defined these up here on the parents so we don't need that right here we can just leave it as so variance equal modal okay so let me try this out I'm gonna save it and come over here and we should see this all work fingers crossed okay cool so that works and that looks pretty nice now if I click this and go to start again well we get the home page but all of this modal and the backdrop still shows so we need to exit this animation now remember we did this before animate presence and we surrounded this motion div right here so that we could animate this out but remember to do that we need some kind of exit animation so let's go to this backdrop variance object and add an exit animation in fact we don't need to we can just say that the exit is going to be equal to this one right here because it's not this one sorry this one hidden because we're gonna go back to an opacity of 0 again so it doesn't show so let me first of all do that and this isn't going to be enough on its own and I'll explain why in a minute so exit is going to be equal to hidden again so that it fades back out well let me try this again let me go back to the end screen we should see the modal first of all and then start again and hmm it doesn't work so why is it not fading out again well we've not actually taken it out of the Dom we've said we've got an exit animation but this is still true so it's not actually exiting out of the Dom so what we could do is use this thing right here set show modal when we click on this button to set it to false again right and let me show you this first of all I'm going to say on click and set that equal to a function and inside this function we're going to set show modal to be false again right so let me show you this first of all there is a problem with this and we'll see that in a second but let's just try it out so let's wait for the modal and then when we click on that ok it seems to work right that's worked and we can go and create the picture again however check this out if I do this and the modal shows again and I don't click start again instead and go back to the previous page well it's still here because now we're not clicking this thing again so we can't now get back to the previous page and hide this so a better way is not to do this right here when we click on the button but every time that we have an exit transition of a route right because if we do that then no matter what route we'd go to it's gonna then set it to be false so what we could do is go to a pas instead and where we have animate presence we can add on and on exit complete prop and set this equal to B that function instead so let me do that I'm going to say set show modal right here to be false and what this does is every time an exit animation completes so every time we go to another page at that point we set shell model to be false and therefore it should be hidden from the screen as well so now it doesn't matter if we hit back because we're exiting out of your routes a component is exiting and at that point it runs that function so if I go forward again and wait for the modal first of all I'm gonna go back to the home page to see if it works and it doesn't so that's because we've not saved this page it's too pitiless I'll let me go back again to the final page wait for this modal again ok so start again and now it disappears so that works now let's try hitting the back button once the model appears ok let's go back and that works as well awesome so now we're removing the modal no matter which way we go and that is pretty much the modal complete so next up I'm gonna try and show you how to animate SVG's by animating our logo up here