# Getting Started

> Learn how to add beautiful scroll animations to your React application in minutes

## 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:

* npm

  ```shell
  npm install react-awesome-reveal @emotion/react
  ```

* pnpm

  ```shell
  pnpm add react-awesome-reveal @emotion/react
  ```

* yarn

  ```shell
  yarn add react-awesome-reveal @emotion/react
  ```

## Basic Usage

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

```tsx
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:

```tsx
<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

* Explore [Revealing Effects](/v4/guides/revealing-effects) for different animation styles
* Learn about [Custom Animations](/v4/guides/custom-animations)
* Check out [Performance Tips](/v4/guides/performances) for optimal results
* View [TypeScript Support](/v4/guides/typescript-support) for type-safe animations