Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



React-Motion: Introduction to the Spring Component

2:03 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Deniz

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

Avatar
James

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.

Avatar
Arthur

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.

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 0, to 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 0 to 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.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?