Add Animation with the react-awesome-reveal Library

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>
        <p>foo</p>
      </Fade>
      <Fade delay={1000}>
        <p>bar</p>
      </Fade>
      <Fade delay={2000}>
        <p>baz</p>
      </Fade>
    </div>
  );
}

except that cascade shows the 2nd item only after the first enter the viewport.

Custom Animations

We can create custom animations with the keyframes tag.

For example, we can write:

import React from "react";
import Reveal from "react-awesome-reveal";
import { keyframes } from "[@emotion/core](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Femotion%2Fcore "Twitter profile for @emotion/core")";

const customAnimation = keyframes`
  from {
    opacity: 0;
    transform: translate3d(200px, 100px, 0);
  }

to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
`;

function AnimatedComponent({ children }) {
  return <Reveal keyframes={customAnimation}>{children}</Reveal>;
}

export default function App() {
  return (
    <div className="App">
      <AnimatedComponent>
        <p>hello world</p>
      </AnimatedComponent>
    </div>
  );
}

to create the customAnimation object with the keyframes tag.

We specify the from styles that are rendered at the start of the animation.

The to styles are rendered at the end of the animation.

The styles in between are interpolated.

Then we can use that with the Reveal component’s keyframes prop.

And we use our AnimatedComponent in the App component.

If no keyframes prop is passed in, the default rendered animation is fade entrance from the left.

Other props we can pass to Reveal include:

• cascade
• damping
• delay
• duration
• fraction
• triggerOnce
• className and childClassName
• style and childStyle

Conclusion

We can add simple animation with the react-awesome-real library.