React-Motion: Configuring a Spring Component

[00:00] Animating a single value in our React motion spring is fairly trivial. Here I'm animating from a default value of 500 to an end value of 100, and I'm applying that to the Y position of our component. If I load it up here in the browser you can see that animation occur. However, animating a single value when I want to do something like animate my scale won't make a lot of sense and we'll get stuck with a scale of 100 which certainly isn't what we want.

[00:26] So what we want to do is animate more than one value. I'm going to give our default value a bit more shape here, I'm going to have a Y key and that's going to have a val key of our original 500. Now val and config are both reserved key names in React-motion. React-motion is going to look for these keys, and these are the values that are going to be interpolated. I'm going to go ahead and create another one for my Z which will be for scale, and I'll start that off at a scale of 4.

[00:54] Just going to copy this guy into our N value, and we'll put our Y back to 100, and our scale back to 1. So to get to these values I'm going to go ahead and extract them from the object that we're passing in. Now in our translate this will be y.val and this will be z.val. Now we can see both of those animations are occurring independent of one another. In addition to being able to configure the value that our spring is interpolating, we can also configure how it interpolates those values using the config key.

[01:33] Now the force of our spring's transition is dictated by the distance between our default value and our end value. The config key takes in two items in an array, the first one is called our spring's stiffness. This is the velocity at which our spring is going to try to get from our default value to our end value. The second value is called the damping value, this is the resistance to the velocity. So this together these are going to control our speed, they're also going to control some of the wobbliness we might see.

[02:08] So I'm going to go ahead and load this up, you can see there's a little bit of a wobble there on the Y axis. If I make this resistance very low, we should see it wobble up and down quite a bit. We can apply a separate one to our Z axis, or scale, so I'll make this one very resistant. If I give that a bunch of wobble, we'll see this guy just jump all over the place. There's also a handful of presets we can pull out of the React-motion library.

[02:38] We'll get that right there, and then rather figuring out our own, we'll set this to presets.wobbly and we'll set this guy to presets.gentle. Try that out, and there's our presets you an see on the Y axis, it is a little wobbly. So our default and end values can actually take a much simpler shape where we just have a key of value, and we drop in the keys that we want to transition through. So here I've taken that value key and passed in my Y and Z values.

[03:15] Copy this object down to our N value, start 100 for the Y, and 1 for the Z, and then in our constant here this will be object.val and we'll just pass in the values, or the keys of our values. Save that, everything's working just fine. Then if we wanted to apply a configuration here, we could say presets.wobbly and that preset of our spring will be applied to both of those values.