Skip to content
Awesome Reveal

Getting started

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.

Install

Section titled “Install”
Terminal window
pnpm add @awesome-reveal/react@next

The package needs React 18 or later.

Reveal an element

Section titled “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.

Choose an animation

Section titled “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.

The other factories are fade(), scale(), blur(), pop() and enter(). See Keyframes.

Animate your own element

Section titled “Animate your own element”

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

  1. Attach ref to the element.
  2. Spread style last into the element style.
import { useReveal } from "@awesome-reveal/react";
import { fade } from "@awesome-reveal/react/keyframes";


function Card() {
  const { ref, style, revealed } = useReveal({
    keyframes: fade(),
    threshold: 0.3,
  });
  return (
    <article
      ref={ref}
      style={{ padding: 16, ...style }}
      data-reveal={revealed ? undefined : "hidden"}
    >
      …
    </article>
  );
}

style hides the element until the reveal. threshold: 0.3 reveals the element when 30% of it is visible.

Next steps

Section titled “Next steps”
KeyframesThe built-in animations, springs and custom keyframes.
ReactReveal, useReveal, manual reveals, SSR and Server Components.
Migrate from v4Move from react-awesome-reveal v4 to the new packages.
Agent skillsSkills that teach coding agents to use the packages.