Add Animation to HTML Elements in a React App with React Motion

The react-motion library lets us add a component to add HTML elements in a React app.

In this article, we’ll look at how to use this to add animations to various HTML elements.

Installation

We can install the package by running:

npm install --save react-motion

Simple Animation

We can add simple animation by using the Motion component.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Motion defaultStyle={{ x: 0 }} style={{ x: spring(10) }}>
        {(value) => <div>{value.x}</div>}
      </Motion>
    </div>
  );
}

The defaultStyle has an object with the initial value.

style has the animation we want to run.

The x property will be animated from 0 to 10.

value has the objects with the x property, and x has numbers between 0 and 10.

Now we should see the number 10 displayed an animation is added.

StaggeredMotion

The StaggeredMotion component lets us animate a collection of items.

The collection must have a constant length.

For example, we can use it by writing:

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

export default function App() {
  return (
    <div className="App">
      <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>
    </div>
  );
}

The defaultStyles has an array of styles with the initial styles, h is used to animate the heights.

The styles prop has the styles to map the initial styles to the end styles.

spring animated the height from 0 to 100px if it’s the first element.

Otherwise, we animate it to the height of the previous element.

Then in the child in between the tags, we set the height of the divs.

TransitionMotion

The TransitionMotion lets us do mounting and unmounting animation.

For example, we can write:

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

export default function App() {
  const [items, setItems] = React.useState([
    { key: "a", size: 10 },
    { key: "b", size: 20 },
    { key: "c", size: 30 }
  ]);

useEffect(() => {
    setItems([
      { key: "a", size: 10 },
      { key: "b", size: 20 }
    ]);
  }, []);

const willLeave = () => {
    return { width: spring(0), height: spring(0) };
  };

  return (
    <div className="App">
      <TransitionMotion
        willLeave={willLeave}
        styles={items.map((item) => ({
          key: item.key,
          style: { width: item.size, height: item.size }
        }))}
      >
        {(interpolatedStyles) => (
          <div>
            {interpolatedStyles.map((config) => {
              return (
                <div
                  key={config.key}
                  style={{ ...config.style, border: "1px solid" }}
                />
              );
            })}
          </div>
        )}
      </TransitionMotion>
    </div>
  );
}

We set the items with an array with 3 entries.

They’re used to render 3 squares.

Then in the useEffect hook, we call setItems to set the items.

We removed the last entry, so we removed the shape.

willLeave is called to shrink the square to 0 to make it disappear.

The TransitionMotion component does the animation.

willLeave is run when the element is removed.

The function in between the tags with by mapping the interpolatedStyles into the divs we render.

The styles prop has the styles we display for each item.

It has the values of items and we map to the latest styles.

This way, we see the animation displayed.

Conclusion

React Motion lets us animate shapes easily by changing the styles from the initial ones to the latest ones with transition effects.