awesome-reveal: reveal-on-scroll animations for React, Vue, Astro and JavaScript
awesome-reveal adds reveal-on-scroll animations (fade-in, slide-in and more) to React, Vue, Astro and plain DOM code. It uses the Intersection Observer API to detect when an element enters the viewport, and the Web Animations API to animate it.
Read the documentation at awesome-reveal.dev.
Quick start
Install the package for your framework. In most setups, you do not need to import a stylesheet. The README of each package gives the exceptions, such as an Astro island.
import { Reveal } from "@awesome-reveal/react";
<Reveal from="left">Hello</Reveal>;
<script setup>
import { Reveal, vReveal } from "@awesome-reveal/vue";
</script>
<template>
<Reveal from="left">Hello</Reveal>
<p v-reveal="{ from: { opacity: 0 } }">Pure fade</p>
</template>---
import { Reveal } from "@awesome-reveal/astro";
<Reveal from="left">Hello</Reveal>import { reveal, cascade } from "@awesome-reveal/core";
const hero = reveal(".hero");
reveal(".card", { from: "left" });
cascade(".features", { interval: 80 });
hero.dispose();
@awesome-reveal/core has no dependencies and needs no CSS. The framework packages hide server-rendered content until hydration. If the script fails, the content shows after 5 seconds. All the packages obey the reduced-motion preference automatically. For a custom animation, use native Keyframe[].
Packages
| Framework | Package | Version |
| --------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| None | @awesome-reveal/core | |
| Astro |
@awesome-reveal/astro | |
| React |
@awesome-reveal/react | |
| React |
react-awesome-reveal | |
| Vue |
@awesome-reveal/vue | |
Each package README documents its API. The @awesome-reveal/core README documents the entrance and viewport options that the packages share.
Version 5 of react-awesome-reveal re-exports @awesome-reveal/react for v4 users. To migrate from v4, read Migrating from v4.
The packages include agent skills that help a coding agent use the library. Each package README gives the names of its skills. The examples folder has a small app for React, Vue, Astro and Next.js.
Browser support
The packages use the native IntersectionObserver and Web Animations API. If one of these APIs is not available, the content reveals immediately and does not stay hidden. Read Core browser support.
Contributing
Open pull requests against the next branch. Read CONTRIBUTING.md to set up the workspace. AGENTS.md lists the commands for the build, the tests and the lint.
Support
- 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.