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.
This lesson is a Community Resource
A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.
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.
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.
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.
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.
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.
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.
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.
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.
Video explains react-motion 0.2.7. Either install that version explicitly or if you are using newer 0.3.x version you can see the difference between two versions from https://github.com/chenglou/react-motion/wiki/v0.3.0-examples
Every video up to now has been written in jsx and now you flip to ES (I presume). It's hard enough learning one new framework and syntax without another one being piled on for no apparent reason.
There is no more Spring component in the latest version (0.3.1), also the new Motion component uses a different set of props, and a string instance for calculations.