Migrate to v5

Install @awesome-reveal/react, or upgrade react-awesome-reveal to version 5. If no other code uses Emotion, remove it. The project must use React 18 or 19.

Replace each effect component with Reveal, and set from to a side or a complete start state. Reveal is a named export: import { Reveal } from "@awesome-reveal/react". With react-awesome-reveal 5, you can keep the react-awesome-reveal import path.

from names the side where the element starts. The v4 left and right directions name that side too, but up and down name the movement, so up becomes from="bottom" and down becomes from="top". For big or a diagonal direction, use a from object with x and y. For a complex effect, change the CSS animation into native keyframe objects, with an offset and an easing for each segment. The last keyframe must agree with the resting style of the element.

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

<Reveal from={{ opacity: 0 }}>Pure fade</Reveal>;
<Reveal from="left">Directional entrance</Reveal>;
<Reveal
  keyframes={[
    { opacity: 0, transform: "scale(.8)" },
    { opacity: 1, transform: "scale(1)" },
  ]}
>
  Native animation
</Reveal>;

The default entrance starts transparent and 24px below the resting position. It takes 600 ms and plays one time. A from object replaces the start state, so it gets no default fade and no offset. The package loads its CSS automatically. Two setups need a step:

• In an Astro island, import reveal.css from the package that you install in the page or the layout: react-awesome-reveal/reveal.css or @awesome-reveal/react/reveal.css.
• In the Next.js Pages Router with webpack, add "@awesome-reveal/react" to transpilePackages. Add it also when you install only react-awesome-reveal.

Check these behavior changes, because the type check does not find them: