Add Animation with the React Animation Library

With the React Animation library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with the React Animation library.

Installation

We can install the library by running:

npm install -s react-animation

Then we can use the provided components to add animation to our React apps.

AnimateOnChange

We can use the AnimateOnChange library to animate new content when the content changes.

We can a string or any child components inside it.

For example, we can write:

import React, { useState } from "react";
import { AnimateOnChange } from "react-animation";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>
        <button onClick={() => setCount((count) => count + 1)}>
          increment
        </button>
      </p>
      <AnimateOnChange>{count}</AnimateOnChange>
    </>
  );
}

We have the count state.

And the state is updated with the increment button.

We render the count in AnimateOnChange so we see some transition effect when we click the increment button.

The default transition effect is the fade effect.

We can set the duration of the animation with the durationOut prop:

import React, { useState } from "react";
import { AnimateOnChange } from "react-animation";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>
        <button onClick={() => setCount((count) => count + 1)}>
          increment
        </button>
      </p>
      <AnimateOnChange durationOut="1000">{count}</AnimateOnChange>
    </>
  );
}

The duration is in milliseconds.

The default value is 200.

We can change the animation effect rendered with the animationIn and animationOut props.

For example, we can write:

import React, { useState } from "react";
import { AnimateOnChange } from "react-animation";

export default function App() {
  const [count, setCount] = useState(0);

return (
    <>
      <p>
        <button onClick={() => setCount((count) => count + 1)}>
          increment
        </button>
      </p>
      <AnimateOnChange
        animationIn="bounceIn"
        animationOut="bounceOut"
        durationOut={500}
      >
        {count}
      </AnimateOnChange>
    </>
  );
}

We set the animationIn to set the effect to render when new content enters.

The animationOut sets the effect to render when existing content leaves.

Content is styled as inline-block by default, but we can override that by setting the style prop.

Custom Animations

We can add custom animations to the animationIn and animationOut props.

For instance, we can write:

import React, { useState } from "react";
import { AnimateOnChange } from "react-animation";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>
        <button onClick={() => setCount((count) => count + 1)}>
          increment
        </button>
      </p>
      <AnimateOnChange
        animationIn="custom-animation-in 500ms ease-out forwards"
        animationOut="custom-animation-out 500ms ease-out forwards"
        durationOut={500}
      >
        {count}
      </AnimateOnChange>
    </>
  );
}

We set the animationIn and animationOut props with the specific effects to render.

Then we would see them displayed when count changes.

Conclusion

We can add simple animations easily to our React app with the React Animation library.