Reveal-on-scroll animations for React, Vue, Astro and plain JavaScript. Content fades and slides in when it enters the viewport. Visit awesome-reveal.dev.
- Simple. One component, or one function call, and a few options.
- Native. Built on the Intersection Observer API and the Web Animations API. The core is less than 2 kB gzipped.
- No flash. The framework packages hide server-rendered content until it reveals. If the script fails, the content shows after 5 seconds.
- Accessible. Obeys the reduced-motion preference, and shows waiting content on focus and in print.
- CSP-friendly. Writes no inline styles and no inline scripts.
Install the package for your framework. Each README documents its API.
| Framework | Package | Version |
|---|---|---|
| React | @awesome-reveal/react |
|
| Vue | @awesome-reveal/vue |
|
| Astro | @awesome-reveal/astro |
|
| JavaScript | @awesome-reveal/core |
|
| React (v4 users) | react-awesome-reveal |
Version 5 of react-awesome-reveal re-exports @awesome-reveal/react for v4 users. To upgrade, read Migrate from v4.
React:
import { Reveal } from "@awesome-reveal/react";
export const Hero = () => <Reveal from="left">Hello</Reveal>;Vue:
<script setup lang="ts">
import { Reveal, vReveal } from "@awesome-reveal/vue";
</script>
<template>
<Reveal from="left">Hello</Reveal>
<p v-reveal="{ from: { opacity: 0 } }">Fade only</p>
</template>Astro:
---
import { Reveal } from "@awesome-reveal/astro";
---
<Reveal from="left">Hello</Reveal>JavaScript:
import { cascade, reveal } from "@awesome-reveal/core";
reveal(".card", { from: "left" });
cascade(".features", { interval: 80 });In most setups, you do not import a stylesheet. The README of each package gives the exceptions, such as an Astro island.
The examples folder has a small app for React, Vue, Astro and Next.js.
Core needs Chrome 104, Edge 104, Firefox 74 or Safari 14.1 (iOS 14.5), or later. Your framework and your bundler target can need more. Read Browser support in the core README. If IntersectionObserver or the Web Animations API is not available, the content shows immediately and does not stay hidden.
The packages include agent skills that teach a coding agent the API. pnpm can link them into your project after you approve them. Each package README gives the names of its skills.
Open pull requests against the main branch. Read CONTRIBUTING.md to set up the workspace. AGENTS.md lists the commands for the build, the tests and the lint.
- Report a bug in the issue tracker.
- Use Discussions to ask a question or to suggest a feature.
- If awesome-reveal helps you, star the repository or support its creator.