Getting Started

About

React Awesome Reveal is a library for React apps that provides a set of curated animated primitives. They can be used to add revealing animations to your components when they enter the browser viewport as the user scrolls the page.

This project was initially born as a modern (and more performant) replacement for react-reveal, which has been discontinued.

Installation

Inside your React project directory, run the following:

yarn add react-awesome-reveal @emotion/react

Or, if you are using npm:

npm install react-awesome-reveal @emotion/react

Or, if you are a pnpm user (🙌 if this is your case):

pnpm add react-awesome-reveal @emotion/react

Quick Start

Import any of the animated components and wrap your elements:

import { Fade } from "react-awesome-reveal";

function App() {
  return (
    <Fade>
      <p>I am an animated text</p>
    </Fade>
  );
}