Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    React-Motion: Introduction to the Spring Component

    Joe MaddaloneJoe Maddalone

    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.

    reactReact
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss