# Getting started

> Install awesome-reveal and add scroll reveal animations with React, Vue, Astro or plain JavaScript: reveal an element, choose an animation, animate your own.

awesome-reveal hides an element until it enters the viewport, and then animates it. Each framework has its own package. Choose your framework in the tabs below. For a page with no framework, choose JavaScript.

## Install

* React

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

  The package needs React 18 or later.

* Vue

  ```shell
  pnpm add @awesome-reveal/vue
  ```

  The package needs Vue 3.5 or later.

* Astro

  ```shell
  pnpm add @awesome-reveal/astro
  ```

  The package needs Astro 6 or 7.

* JavaScript

  ```shell
  pnpm add @awesome-reveal/core
  ```

  The package is ESM-only. Load it with a bundler, such as Vite, or in a `<script type="module">` with an import map.

> **Note**
>
> Version 1.0 is a prerelease. Until 1.0.0, the `latest` tag installs the newest prerelease.

## Reveal an element

* React

  Put the content in a `Reveal` component:

  ```jsx
  import { Reveal } from "@awesome-reveal/react";

  <Reveal>
    <p>I gently appear as I enter the viewport</p>
  </Reveal>;
  ```

  `Reveal` renders a `div` around its children. With no `keyframes`, the `div` fades in and moves up.

* Vue

  Put the `v-reveal` directive on the element:

  ```vue
  <script setup>
  import { vReveal } from "@awesome-reveal/vue";
  </script>

  <template>
    <p v-reveal>I gently appear as I enter the viewport</p>
  </template>
  ```

  With no `keyframes`, the element fades in and moves up.

* Astro

  Put the content in a `Reveal` component:

  ```astro
  ---
  import { Reveal } from "@awesome-reveal/astro";
  ---

  <Reveal>
    <p>I gently appear as I enter the viewport</p>
  </Reveal>
  ```

  `Reveal` renders a `div` around its children. With no `keyframes`, the `div` fades in and moves up.

* JavaScript

  Call `reveal` with the element:

  ```js
  import { reveal } from "@awesome-reveal/core";

  reveal(document.querySelector("#intro"));
  ```

  With no `keyframes`, the element fades in and moves up. `reveal` hides the element when the script runs, so the element can show before that. To hide it from the first paint, see [Avoid a flash on page load](/core/#avoid-a-flash-on-page-load).

## Choose an animation

Each package has a `keyframes` entry point with the same keyframes factories. Give the result of a factory to the `keyframes` option:

* React

  ```jsx
  import { Reveal } from "@awesome-reveal/react";
  import { slide } from "@awesome-reveal/react/keyframes";

  <Reveal as="section" keyframes={slide({ direction: "left" })} duration={800}>
    …
  </Reveal>;
  ```

  * `as` sets the tag of the rendered element. `Reveal` gives its other props and its `ref` to that element.
  * `slide({ direction: "left" })` moves the element to the left as it fades in.
  * `duration` is in milliseconds. The default is `600`.

* Vue

  ```vue
  <script setup>
  import { vReveal } from "@awesome-reveal/vue";
  import { slide } from "@awesome-reveal/vue/keyframes";

  const fromLeft = slide({ direction: "left" });
  </script>

  <template>
    <section v-reveal="{ keyframes: fromLeft, duration: 800 }">…</section>
  </template>
  ```

  * The value of `v-reveal` is an object with the options.
  * `slide({ direction: "left" })` moves the element to the left as it fades in.
  * `duration` is in milliseconds. The default is `600`.

* Astro

  ```astro
  ---
  import { Reveal } from "@awesome-reveal/astro";
  import { slide } from "@awesome-reveal/astro/keyframes";
  ---

  <Reveal as="section" keyframes={slide({ direction: "left" })} duration={800}>
    …
  </Reveal>
  ```

  * `as` sets the tag of the rendered element. `Reveal` gives its other attributes to that element.
  * `slide({ direction: "left" })` moves the element to the left as it fades in. The factory runs on the server.
  * `duration` is in milliseconds. The default is `600`.

* JavaScript

  ```js
  import { reveal } from "@awesome-reveal/core";
  import { slide } from "@awesome-reveal/core/keyframes";

  reveal(document.querySelector("section"), {
    keyframes: slide({ direction: "left" }),
    duration: 800,
  });
  ```

  * The second argument of `reveal` is an object with the options.
  * `slide({ direction: "left" })` moves the element to the left as it fades in.
  * `duration` is in milliseconds. The default is `600`.

The other factories are `fade()`, `scale()`, `blur()`, `pop()` and `enter()`. See [Keyframes](/concepts/keyframes/).

## Animate your own element

* React

  To animate your own element or component with no wrapper, use the `useReveal` hook:

  Spread `getProps(yourProps)` on the element. Pass your own `ref` and `style` inside `getProps`, not next to the spread.

  ```jsx
  import { useReveal } from "@awesome-reveal/react";
  import { fade } from "@awesome-reveal/react/keyframes";

  function Card() {
    const { getProps } = useReveal({
      keyframes: fade(),
      threshold: 0.3,
    });

    return (
      <article {...getProps({ className: "card", style: { padding: 16 } })}>
        …
      </article>
    );
  }
  ```

  `getProps` hides the element until the reveal and sets `data-reveal`. `threshold: 0.3` reveals the element when 30% of it is visible.

* Vue

  `v-reveal` already animates your own element, with no wrapper. On a component, it animates the root element of the component.

  To render the element from a component instead, use `Reveal`:

  ```vue
  <script setup>
  import { Reveal } from "@awesome-reveal/vue";
  import { fade } from "@awesome-reveal/vue/keyframes";
  </script>

  <template>
    <Reveal as="article" :keyframes="fade()" :threshold="0.3">…</Reveal>
  </template>
  ```

  `threshold: 0.3` reveals the element when 30% of it is visible.

* Astro

  Astro has no hook or directive. `Reveal` renders the element: set the tag with `as`, and give your attributes to `Reveal`. See [Astro](/astro/).

* JavaScript

  `reveal` already animates your own element, with no wrapper. Call it once for each element:

  ```js
  import { reveal } from "@awesome-reveal/core";
  import { fade } from "@awesome-reveal/core/keyframes";

  for (const card of document.querySelectorAll(".card")) {
    reveal(card, { keyframes: fade(), threshold: 0.3 });
  }
  ```

  `threshold: 0.3` reveals each card when 30% of it is visible.

> **Did Awesome Reveal save you time?**
>
> Awesome Reveal is free and open source. A [sponsorship on GitHub](https://github.com/sponsors/morellodev), from $1 a month, helps to keep it maintained and up to date.

## Next steps

[Keyframes](/concepts/keyframes/): The built-in animations, springs and custom keyframes.

[React](/react/): Reveal, useReveal, manual reveals, SSR and Server Components.

[Vue](/vue/): v-reveal, Reveal, manual reveals and SSR.

[Astro](/astro/): Reveal, the ClientRouter, server islands and CSP.

[JavaScript](/core/): reveal(), a hidden state with no flash, and the API for adapters.

[Migrate from v4](/migrate-from-v4/): Move from react-awesome-reveal v4 to the new packages.

[Agent skills](/agent-skills/): Skills that teach coding agents to use the packages.