Add Animation with the react-motion Library

With the react-motion library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with react-motion.

Getting Started

We can install the package by running:

npm install --save react-motion

Motion

The Motion component lets us create the animation with the easing function of our choice.

For example, we can write:

import React, { useState } from "react";
import { Motion, spring } from "react-motion";

export default function App() {
  const [click, setClick] = useState(false);
  return (
    <>
      <button onClick={() => setClick(!click)}>toggle</button>
      <Motion defaultStyle={{ x: 0 }} style={{ x: spring(click ? 30 : 0) }}>
        {({ x }) => (
          <div
            style={{
              transform: `translateX(${x}px)`
            }}
          >
            hello world
          </div>
        )}
      </Motion>
    </>
  );
}

to move the div when we click on the toggle button.

The Motion component wraps around the items that we want to animate.

The defaultStyle prop has the default styles.

And the Motion component’s style prop has the style that’s applied when animation.

Then we can get the x value in the render prop and then use it in our content.

The spring function renders the x value that’s applied when we run the animation.

We can animate more than one style.

For example, we can write:

import React, { useState } from "react";
import { Motion, spring } from "react-motion";

export default function App() {
  return (
    <>
      <Motion
        defaultStyle={{ x: 0, y: 0 }}
        style={{ x: spring(10), y: spring(20) }}
      >
        {({ x, y }) => (
          <div
            style={{
              transform: `translateX(${x}px) translateY(${y}px)`
            }}
          >
            hello world
          </div>
        )}
      </Motion>
    </>
  );
}

to animate the x and y values and use them with the div.

StaggeredMotion

The StaggeredMotion component animates a collection of fixed lengths whose values depend on each other.

To use it, we can write:

import React from "react";
import { spring, StaggeredMotion } from "react-motion";

export default function App() {
  return (
    <>
      <StaggeredMotion
        defaultStyles={[{ h: 0 }, { h: 0 }, { h: 0 }]}
        styles={(prevInterpolatedStyles) =>
          prevInterpolatedStyles.map((_, i) => {
            return i === 0
              ? { h: spring(100) }
              : { h: spring(prevInterpolatedStyles[i - 1].h) };
          })
        }
      >
        {(interpolatingStyles) => (
          <div>
            {interpolatingStyles.map((style, i) => (
              <div key={i} style={{ border: "1px solid", height: style.h }} />
            ))}
          </div>
        )}
      </StaggeredMotion>
    </>
  );
}

to create 3 divs that are stacked on top of each other.

The height of each is animated so that their height increases up to 100px each.

We pass in an array to the defaultStyles prop to set the initial styles for each div,

Then in the styles prop, we create a function to get the previously interpolated styles from the parameter.

Then we return the object with the height style to animate with depending on the index of the element that’s animated.

In the render prop, we get the interpolatingStyles and apply them to the div.

Conclusion

We can create simple animations with the react-motion library.