Animating the Modal

[00:00:00]
>> As a last kind of animation exercise, let's animate our modal. So we have it rendering now, let's actually go and animate this. First, let's go and commit this stuff. So this is all the heavy, heavy styled components stuff. So we're just gonna commit this, and let's just say, style components, Commit messages.

[00:00:24]
Okay, so first, we need to install react-spring, so npm i react-spring And inside of index, we're gonna set some state here. So we already have useState, so let's do showModal and let's do setShowModal. So by default, we don't want it to be showing. Wow, I just deleted our state, let's not do that.

[00:00:53]
Let's create a second state, [showModal, setShowModal] = useState(false). So let's create just a third button similar to our dark theme, our default theme, copy and paste one of those. onClick, though, this is gonna be setShowModal. And let's just toggle our state, so showModal, whatever the opposite is, so toggle modal.

[00:01:26]
Okay, So we have our SignUpModal here. Our SignUpModal needs to know whether or not to be shown. So let's pass some state, so we've got our showModal state that we just made. And we need our event handler or a state updater, so setShowModal, setShowModal. Okay, so now we have those two pieces of state that we're passing along.

[00:01:49]
And if we go back to our modal here, let's destructure these out. So we have our two pieces of state that we're now pulling out of our SignUpModal. That's why we had these curly braces here earlier. You don't need curly braces if you're just returning JSX, but I knew we were gonna add some animations.

[00:02:09]
So first thing we need to do is import some things from react-spring. So import, we're just going to use useSpring, and we're gonna need that animated. Next, we're gonna define our animation. So const animation, It's gonna be very similar to kind of what we just did. All right, so if our modal is being shown, we want it to be visible.

[00:02:37]
Otherwise, we don't want it to be shown it all, we want it to be transparent, so it'll fade in and out. And then transform, so this'll have it slide in and slide out. So if modal is visible, we want it to fall into its natural place. Otherwise, I'm gonna animate this out -200%, just to make sure it really gets off the screen.

[00:02:58]
But this is a little bit excessive, you might not need -200%. And then the last thing is, we need to actually tell react-spring, this is what's being animated. And so what I'm gonna do is actually wrap this in an animated.div here. Now again, this is not fully accessible, you would need to add some aria attributes on here to make this fully accessible.

[00:03:19]
But this is what we're working with for right now. So technically, if I go back, this should be working now. So what's going on here? [SOUND] Animation, did I spell something wrong, is assigned a value. You know what, does anyone know what my problem is? What is it, Brent?

[00:03:48]
>> You've not set the animation on your animated.div.
>> Perfect, cool, thanks, yeah, I need to pass that as a style attribute.
>> Got one, yay [LAUGH].
>> Yay, cool. It's really fast, right, that's really fast. So one thing react-spring comes with is a configuration. I just wanna show you this, react-spring.

[00:04:08]
If you go to their website, they have this fun little tool where you can actually play around with the tension and the mass of your animations. Since it's all physics-based, It's all mass and tension and all that stuff. I don't know where on the page it is, so we're not gonna mess around.

[00:04:24]
But it does come with a configuration. And so what I can do is, we can pass this config option here and say, I wanna slow this down, let's give it something really crazy, molasses. That looks ridiculous, you should never animate a modal this slowly. But it can show you that they do come, we could just set this to slow, for example, and it's a little bit nicer.

[00:04:47]
So the longer distance that you're animating something, the longer duration it has to have. Otherwise, it's just way too much.