Add Animation with the react-awesome-reveal Library

Photo by Diane Helentjaris on Unsplash

With the react-awesome-reveal 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-awesome-reveal.

Installation

We can install the library by running:

npm install react-awesome-reveal --save

with NPM or we can run:

yarn add react-awesome-reveal

with Yarn.

Quick Start

We can add a simple fade effect to our content with the Fade component.

For example, we can write:

import React from "react";
import { Fade } from "react-awesome-reveal";
export default function App() {
  return (
    <div className="App">
      <Fade>
        <p>hello world</p>
      </Fade>
    </div>
  );
}

to display ‘hello world’ with a fade effect as it enters.

Other supported effects include Bounce, Fade, Flip, Hinge, JackInTheBox, Roll, Rotate, Slide and Zoom .

We can add the triggerOnce prop to animate only the first time an element enters the viewport:

import React from "react";
import { Fade } from "react-awesome-reveal";
export default function App() {
  return (
    <div className="App">
      <Fade triggerOnce>
        <p>hello world</p>
      </Fade>
    </div>
  );
}

Chaining Multiple Animations

We can chain multiple animations with the cascade prop:

import React from "react";
import { Fade } from "react-awesome-reveal";
export default function App() {
  return (
    <div className="App">
      <Fade cascade>
        <p>foo</p>
        <p>bar</p>
        <p>baz</p>
      </Fade>
    </div>
  );
}

Then each of the p elements will be animated one after the other.

This is similar to:

import React from "react";
import { Fade } from "react-awesome-reveal";
export default function App() {
  return (
    <div className="App">
      <Fade>…