Skip to content
React Awesome Reveal

Getting Started

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

  • 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

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

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

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