Animation with the react-motion Library — Transitions

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.

TransitionMotion

We can add component mounting and unmounting animation with the TransitionMotion component.

For instance, we can write:

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

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

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

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

  return (
    <>
      <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>
    </>
  );
}

We use the TransitionMotion component to render a transition effect that’s shown when we remove the bottom div.

We create the willLeave function to return the effect that we want to show.

And we pass that into the willLeave prop.

The styles prop has the styles for each item.

The key property is required to identify the correct item when animating.

We animate their width and height .

The render prop has the divs that we want to render.

We get their styles from the interpolatingStyles parameter.

And we apply the styles form them by passing that into he style prop.

We can change how the spring animation works by passing in a 2nd argument.

For instance, we can write:

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

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

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

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

  return (
    <>
      <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>
    </>
  );
}

We set the stiffness and damping to change how the animation is rendered.

We can also add the precision property to specify both the rounding of the interpolated value and the speed.

Conclusion

We can use the TransitionComponent to render transition effects in our React component.