# FAQ

> Answers about Awesome Reveal: scroll animations in React, Vue and Astro, Next.js and SSR, reduced motion, accessibility, bundle size, browsers and alternatives.

## 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](/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](/nextjs/).

## 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](/examples/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](/concepts/options/#viewport).

## 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](/concepts/accessibility/#reduced-motion).

## 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](/concepts/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](/concepts/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](/concepts/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](/migrate-from-v4/). The package also ships an agent skill that migrates v4 code: see [Agent skills](/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](https://github.com/sponsors/morellodev).