Add Animation with the react-motion Library

Photo by Dimon Blr 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.

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.