Animation with the React Animation Library — Loading Animation and Easings

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.

HideUntilLoaded

We can hide the content until a URL is loaded with the HideUntilLoaded component.

For example, we can write:

import React from "react";
import { HideUntilLoaded } from "react-animation";

export default function App() {
  return (
    <>
      <HideUntilLoaded imageToLoad="https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo">
        your content
      </HideUntilLoaded>
    </>
  );
}

We use the HideUntilLoaded component with the imageToLoad prop to wait for the image with the given URL to load until the content inside it is displayed.

We can add a spinner that’s displayed when the image with the given URL is loaded with the Spinner prop.

For instance, we can write:

import React from "react";
import { HideUntilLoaded } from "react-animation";

export default function App() {
  return (
    <>
      <HideUntilLoaded
        imageToLoad="https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo"
        Spinner={() => <div>Loading...</div>}
      >
        your content
      </HideUntilLoaded>
    </>
  );
}

We add the Spinner prop with a function that returns the JSX for the loading indicator.

The animation effect can be changed with the animationIn prop.

For example, we can write:

import React from "react";
import { HideUntilLoaded } from "react-animation";

export default function App() {
  return (
    <>
      <HideUntilLoaded
        animationIn="bounceIn"
        imageToLoad="https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo"
        Spinner={() => <div>Loading...</div>}
      >
        your content
      </HideUntilLoaded>
    </>
  );
}

We change the animation effect that’s displayed when the content is loading with the animationIn prop.

AnimateGroup

The AnimateGroup component lets us animate components being added, removed, or modified within a group of components.

For instance, we can write:

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

export default function App() {
  const [nums, setNums] = useState([1, 2]);

  useEffect(() => {
    const timer = setInterval(() => {
      setNums((nums) => [...nums, nums[nums.length - 1] + 1]);
    }, 1500);

    return () => clearInterval(timer);
  }, []);

  return (
    <>
      <ul>
        <AnimateGroup animation="bounce">
          {nums.map((word) => (
            <li key={word}>{word}</li>
          ))}
        </AnimateGroup>
      </ul>
    </>
  );
}

to add the nums state and animate it with the AnimationGroup .

We set the animation prop to 'bounce' so that when we add an entry to nums , we’ll see the bounce effect rendered on the entry being added.

The useEffect callback adds an entry to nums by calling the setNums function.

We add a new entry to nums every 1500ms by calling setInterval .

Animations

We can add animations with our own styling by using the anuimations object.

For example, we can write:

import React from "react";
import { animations } from "react-animation";

export default function App() {
  return (
    <>
      <div style={{ animation: animations.popIn }}>hello world</div>
    </>
  );
}

to render the popIn effect when we mount the div with the animation.popIn property.

popIn is 'pop-in 500ms cubic-bezier(0.19, 1, 0.22, 1) forwards’ .

Easings

We can set the timing function for our animation with the easings object.

To do this, we write:

import React from "react";
import { easings } from "react-animation";

const style = {
  animation: `pop-in ${easings.easeOutExpo} 500ms forwards`
};
export default function App() {
  return (
    <>
      <div style={style}>hello world</div>
    </>
  );
}

We pass the easings.easeOutExpo string into our animation style string.

Then we apply the easing in our animation.

Conclusion

We can apply various animation effects with the React Animation library.