Animation with the react-motion Library — Transitions

Photo by Dawid Zawiła on Unsplash

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}…