FAQ

How do I add scroll animations to a React app?

Install @awesome-reveal/react and wrap the content in Reveal. The content fades in and slides up when it scrolls into view. To use another animation, set the keyframes option, for example keyframes={fade()}. See Getting started.

Does Awesome Reveal work with Next.js, SSR and React Server Components?

Yes. Reveal renders the element hidden on the server, so the page has no flash before the animation. Reveal has the "use client" directive, so you can render it in a Server Component. See Scroll animations in Next.js.

Does it support Vue and Astro?

Yes. @awesome-reveal/vue has a v-reveal directive and a Reveal component for Vue 3.5 or later. @awesome-reveal/astro has a Reveal component for Astro 6 and 7, with no client framework. For plain JavaScript, use reveal() from @awesome-reveal/core.

How do I animate a list one item at a time?

Set the stagger option on the element that holds the items. Each child starts stagger milliseconds after the previous one. See Staggered list.

How do I replay the animation every time the element scrolls into view?

Set once: false. The element then hides when it leaves the viewport, and the animation plays at each entry. See Options.

Does it respect prefers-reduced-motion?

Yes. By default, the element appears with no animation when the user prefers reduced motion. The reducedMotion option changes this. See Accessibility.

Is the content of a scroll animation accessible?

The content stays in the server HTML. Hidden elements use opacity: 0 only, so they stay in the accessibility tree, and the browser’s find-in-page finds their text. If JavaScript does not run, a <noscript> style that you add shows the content. The Astro component needs no <noscript> style. See Accessibility.

How big is the library?

About 2 kB gzipped or less for Reveal with one animation, depending on the package. It has no third-party dependencies, and tree-shaking keeps only the animations that you import.

Which browsers does it support?

Chrome 84, Firefox 75 (79 on Android) and Safari 13.1, or later. It uses Intersection Observer and the Web Animations API, which are Baseline Widely available. In a browser without a necessary API, the content still shows. See Browser support.

Can I make my own animation?

Yes. Give a keyframes array to the keyframes option, or build a reusable animation with defineKeyframes. The library also has fade(), slide(), scale(), blur(), pop(), enter() and spring easing. See Keyframes.

How is it different from AOS, Framer Motion or GSAP?

Awesome Reveal does one job: it reveals elements as they scroll into view. It has no dependencies, and it uses native browser APIs, so it has no scroll listeners. Choose a full animation library when you need timelines, gestures or animations that follow the scroll position.

How do I migrate from react-awesome-reveal v4?

Awesome Reveal is the successor of react-awesome-reveal. Install @awesome-reveal/react, replace the effect components with Reveal and a keyframes factory, and check the behavior changes. See Migrate from v4. The package also ships an agent skill that migrates v4 code: see Agent skills.

Is it free to use?

Yes. Awesome Reveal is free and open source under the MIT license. You can sponsor it on GitHub.