Categories
React

Animation with the React Animation Library — Loading Animation and Easings

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *