In this lesson we'll configure a single react-motion Spring component to manage the animation of multiple elements.

React-Motion: Animate Multiple Elements with a Single Spring

[00:00] Hey, guys. In this video, we're going to talk about animating a group of elements using a single react-motion spring. Here's our spring on the page. I've got a default value of zero and an end value of 360, and I'm using that to rotate our single item. We can see that item rotate there on the page.

[00:18] In my state, I've got a key of items and I've got this little method here for creating an array of any length and populating it with values of zero to length minus one. Our goal here is to create a div, using this pattern, for each of the items in our state and allow each of those items to have its own animation values.

[00:42] Since the work here is going to be a little more extensive than what we've done in the past, I'm going to go ahead and set our default values to this.getDefaults, and I'm going to set our end value to this.getEnds. We'll go in and create those now, so getDefaults.

[00:58] We're going to create an object here. We'll just call it Object. We're going to loop through our this.state.items with a forEach, take the the key. Now we're going to create a new key in our object, based on the value from our state.items. That'll be a new object to represent our values. 

[01:22] We'll start our rotate at -360 and we'll go ahead and animate our scale, as well, and we'll start at zero. For our getEnds, we can actually copy this, update our method name, and we'll set it to where we want to end. Now, for our default value and our end value, in each case we have a new object. 

[01:49] There's a key for each of the items in our state, and each of those keys is an object that as a val key. Inside that val object, we have a rotate value and a scale value. At this moment, what we're trying to do is rotate each of our items from -360 degrees in a scale of zero, to a rotation of zero in a scale of one. Actually, each of these needs to go ahead and return the object.

[02:16] Here in our spring, let's fix this typo, and right here where we begin, it's going to wrap everything up in a div. Since we are going to be returning multiple items, I'm going to use object.keys to get the keys of our current value, which is being passed into our callback. Again, this is representative of the objects that we just created.

[02:35] I'm going to map those keys. To get that rotate and scale value, we're going to say rotate scale is equal to currentKey.val. Go in and grab this style variable. Paste in there. This will now be rotate, and we'll break this out a little bit at our scale. We'll also grab our previous return, drop it right in here.

[03:10] We'll use our key value as a unique key for this item. We'll change our inner HTML to that key value, as well. Let's clean up our code a little bit. Don't need that bracket. OK, I think we're looking good. Let's try this out. 

[03:28] We have our zero to seven animating items. We go ahead and set this to, say, 16, and now we've got two rows of animating items. If we wanted to get a look at the fact that each of our items has an individual transition setting, I'm going to go ahead and set it up so that the rotate will occur counterclockwise on any even keys, and the scale will begin at two on any of those even keys.

[03:52] Go ahead and save that, and you can see that the even numbers -- here are the zero, the two, the four -- will rotate counterclockwise, and begin at a larger scale and become smaller.

React-Motion: Animate Multiple Elements with a Single Spring

Share this video with your friends