Skip to content
Awesome Reveal
Search limited to v4 of react-awesome-reveal. Search the Awesome Reveal docs for the new packages.

Getting Started

This page is for v4 of the legacy react-awesome-reveal package. Read the Awesome Reveal docs for the new @awesome-reveal/* packages, and the migration guide to move from v4.

Introduction

Section titled “Introduction”

React Awesome Reveal brings life to your React applications with smooth, performant scroll animations. When elements enter the viewport, they animate into view, creating an engaging and professional user experience.

Key Benefits

Section titled “Key Benefits”
  • Zero Configuration: Works out of the box with sensible defaults
  • Optimized Performance: Uses the Web Animations API for smooth animations
  • Mobile-Friendly: Responsive animations that work great on all devices
  • Tree-Shakeable: Only import what you need to keep your bundle size small

Installation

Section titled “Installation”

Choose your preferred package manager to install React Awesome Reveal and its peer dependency:

Terminal window
npm install react-awesome-reveal @emotion/react

Basic Usage

Section titled “Basic Usage”

Import any animation component and wrap your content. The element will animate when it enters the viewport:

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


function App() {
  return (
    <div>
      <h1>Welcome to my app!</h1>


      <Fade>
        <p>This content will fade in when scrolled into view</p>
      </Fade>


      {/* Multiple elements will animate together */}
      <Fade cascade>
        <h2>Features</h2>
        <p>Feature 1</p>
        <p>Feature 2</p>
        <p>Feature 3</p>
      </Fade>
    </div>
  );
}

Customization Options

Section titled “Customization Options”

Customize your animations with these common props:

<Fade
  delay={200} // Wait 200ms before starting
  duration={1000} // Animation lasts 1 second
  triggerOnce // Only animate once
  fraction={0.5} // Start animation when element is 50% visible
>
  <p>Customized animation</p>
</Fade>

Next Steps

Section titled “Next Steps”