Getting started

/* The copy button needs JavaScript. Without it, only the menu shows, so the menu needs a label. */ .actions .copy { display: none; } .actions .more { margin-left: 0; } .actions summary { border-radius: 0.5rem; } .actions summary::before { content: "Page actions"; }

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

pnpm add @awesome-reveal/react

The package needs React 18 or later.

pnpm add @awesome-reveal/vue

The package needs Vue 3.5 or later.

pnpm add @awesome-reveal/astro

The package needs Astro 6 or 7.

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.

Reveal an element

Put the content in a Reveal component:

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.

Put the v-reveal directive on the element:

<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.

Put the content in a Reveal component:

---
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.

Call reveal with the element:

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.

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:

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.

<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.

---
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.

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.

Animate your own element

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.

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.

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:

<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 has no hook or directive. Reveal renders the element: set the tag with as, and give your attributes to Reveal. See Astro.

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

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.

Next steps

KeyframesThe built-in animations, springs and custom keyframes.

ReactReveal, useReveal, manual reveals, SSR and Server Components.

Vuev-reveal, Reveal, manual reveals and SSR.

AstroReveal, the ClientRouter, server islands and CSP.

JavaScriptreveal(), a hidden state with no flash, and the API for adapters.

Migrate from v4Move from react-awesome-reveal v4 to the new packages.

Agent skillsSkills that teach coding agents to use the packages.