useSpring

[00:00:00]
>> react-spring is an awesome animation library. It is physics-based. It uses React hooks to create complex animations. And it's super fun, super easy to use. Kind of the bread and butter hook, the main hook is called useSpring. So we can actually use this to transform different CSS properties on an HTML element.

[00:00:20]
So you can see here we're defining from. These are the properties where it's going to start, and to is where it's going to end. And react-spring can interpolate the values in between. We don't need to worry about setting all those different steps. So you can also transition just on enter and exit, as well as relative to your React state.

[00:00:40]
In this example here, we can see we actually use our react-spring state to trigger different states. So if our modal is shown, we want it to be fully visible. We want it to be in the viewport. We want it to be perfectly opaque. If the modal is supposed to be hidden, we don't want that shown at all.

[00:00:55]
And this is kind of different from an animation that would happen once. So when you visit a page, for example, maybe you wanna trigger an animation just one time. So this is what I wanted to transition to, but it also works really, really well with your React state.

[00:01:11]
So it can be done in relation to what kind of data that your state has. And all we need to do to get this to render is we define our animation here with the useSpring hook, define what properties we're animating. And then whatever elements are going to be animated, we just need to set animated..

[00:01:30]
So, animated.div, animated.h1. That tells react-spring, this is the item that's gonna be animated. And once we pick that element, all we need to do is pass in our animation that we just defined with the style prop, that's it. Let's go to a CodePen example. At the bottom, it says this Code Sandbox, that's the link you're gonna wanna go to.

[00:01:53]
So the first thing we can see down here, react-spring has already been installed. That's great, so what are we gonna do? This emoji carousel, first of all, let's get rid of this. In the index file, change this to, I'm sorry, not index. In our app, we're showing the wrong thing, let's change this to FadeIn.

[00:02:10]
It's rendering the wrong thing. Okay, so what are we gonna do? We're going to animate text in and out, depending upon our state. So we've got a button that says Toggle animation, and we've got a paragraph that says, Animate me on click. Okay, this is kind of what it looks like.

[00:02:31]
So the first thing that we need to do is set some state. So const [showText, setShowText] = useState. Let's say (true), we'll have it showing by default. Let's make our animation, so const animation = useSpring. Okay, it's gonna take an object. So let's do opacity, so let's say if we're showing our text, we want this to be visible.

[00:03:04]
So opacity 1 if we're showing. And otherwise, let's set it to 0. And I said in the instructions that I wanted this to actually slide in from the top, 30% on show, so let's do that. Let's do a transform. And if our text is showing, we're gonna translate our y.

[00:03:25]
So it's gonna slide in, so 'translateY(0)'. If it's showing, we want it to be in its natural position. If it's not, let's animate it out, -30%. So it'll slide out to the top. So what do we wanna animate? We wanna animate this text, right, so it has to be prefaced by animated.p.

[00:03:48]
And we have to pass this in the style attribute, so style=[animation]. Now we just need to update our style onClick, so onClick, we'll do setShowText, and we'll toggle it. So whatever ShowText is, let's do the opposite. So it's not actually transitioning our transform, but it is actually transitioning the opacity, so that's really good.

[00:04:19]
There it is. Sometimes CodeSandbox is a little buggy, where it won't refresh properly. Okay, let's put that backup. So this is saying if our text is showing, we want to translate that down to its natural position. Otherwise, we want to feed it out and slide out. Okay, so that's just useSpring.

[00:04:35]
Again, you can hook into your state. You can set whatever CSS properties you want to transition. And then just tell react-spring, this is the element we want to animate.