**React-motion** is a library that is used to create animated user interfaces. It provides an API which simplifies the task of animating [components](https://www.educative.io/answers/what-is-a-react-component) in [React](https://www.educative.io/answers/what-is-react-js). React-motion has three main components:

1. `Motion`
2. `StaggeredMotion`
3. `TransitionMotion`

(The function `spring()` is also frequently used.)

To start, we'll only look at how `Motion` and `spring()` work; therefore, it is necessary to write the following import statement:

```js
import { Motion, spring } from "react-motion";
```

# Props

The `Motion` component receives two props:

1. **`defaultStyle:`** This prop is an object that contains the *starting values* for all the properties of the component that we want to change during animation(e.g., the place of a text, font size, font color, etc.).

2. **`style:`** This prop is also an object, but it contains the *destination values* of the properties specified in `defaultStyle`. These destination values may be specified with, or without, the `spring()` function.

# `spring()`

The `spring()` function indicates that the destination is to be reached slowly, with a transition, instead of instantly. The *first parameter* of this function is the destination value, while the *optional* second parameter* is an object which specifies the *stiffness* and *damping* of the transition; skipping this parameter sets *stiffness* equal to 170 and *damping* equal to 26.

> **Stiffness** refers to the speed with which the destination value is reached; **damping** is the friction encountered by the animated component during the transition.

# Child

The Motion component receives a function as its child, ​which is used to apply the updated value to a React component. This function is automatically passed as an object which contains the updated values as its parameter. This value is then used to modify the property, which is to be animated.

# Code

The following example shows how to animate the font size of three different `<p>` tags, using variables `x`, `y` and `z`:

import React from 'react';

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);


import React from 'react';
import { Motion, spring } from 'react-motion';

export default class App extends React.Component {
  render() {
    return (
      <Motion
        // Setting initial values:
        defaultStyle={{x: 12, y: 12, z: 16}}
        
        // Setting destination values in 1st param:
        style={{
                x: spring(24, {stiffness: 1, damping: 5}),
                y: spring(24, {stiffness: 200, damping: 40}),
                z: spring(24, {stiffness: 60, damping: 0})
              }}
      >
        {style => (
          <div>
            <p style={{fontSize: `${style.x}px`}}>
              Lower Stiffness!
            </p>
            <p style={{fontSize: `${style.y}px`}}>
              Higher Stiffness!
            </p>
            <p style={{fontSize: `${style.z}px`}}>
              Zero Damping
            </p>
          </div>
        )}
      </Motion>
    );
  }
}



import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

Typescript React

What is react-motion?

React-motion simplifies animating components in React, using Motion and spring() for smooth transitions by setting starting and destination values with flexible properties.