React-Motion: Introduction to the Spring Component
Spring is the simplest component available to us in React-Motion. It allows us to transition from a defaultValue to an endValue leaving what to do with that value as it transitions up to us. In this lesson we'll create a simple Spring and use it to update the style of our component.
[00:00] The simplest component available to us in react-motion is a "Spring." Here in the "render method" of my component, I'm just going to return a "Spring" component.
[00:10] What a "Spring" allows us to do is transition a value from "default value," which I'll set to 0to an "end value," which I'll set to 360. We can apply that transition to the children of our "Spring" component.
[00:29] The children of our "Spring" component is expected to be a callback function which takes in the interpolated value. Our interpolated value, in this case, is "val." I'm just going to return a "div," drop that "val" right inside of that guy.
[00:49] Save that, and over here on the right, we can see that our value is in fact being interpolated, transitioned from 0to 360. If we look, we can see that we actually get a little bit of easing right there at 359.
[01:02] Now that we have that value transitioning from "default value" to "end value," we can do with it whatever we like. I'm going to create a "style" object here.
[01:11] Let's say "width" is equal to "val," "height" is equal to "val," and I'm going to go and absolutely position this. Let's say our "top" is equal to "val." I'm going to keep it on the screen, so I'm going to quarter that.
[01:24] Same thing with the left. I'm going to give this a border, one pixel, solid red, and then we'll apply "style" to our "div." Save that, and we see our animation is, in fact, occurring.
[01:39] If we wanted to play with it a little bit, we could add a "transform," set our "rotate" to our "val." Tack on the "degrees," save that, and then we can see we've got our full 360-degree rotation.