# ScrollReveal — Animate Elements as They Scroll Into View

> A zero-dependency JavaScript library that creates scroll-based reveal animations for web elements with a simple declarative API.

## Install

Save in your project root:

# ScrollReveal — Animate Elements as They Scroll Into View

## Quick Use
```html
<script src="https://unpkg.com/scrollreveal"></script>
<script>
  ScrollReveal().reveal('.headline', { delay: 200 });
  ScrollReveal().reveal('.content', { delay: 400, origin: 'bottom' });
</script>
```

## Introduction
ScrollReveal is a lightweight JavaScript library that animates elements as they enter the browser viewport during scrolling. It provides a clean declarative API for creating engaging scroll-based reveal effects without any external dependencies or CSS animation frameworks.

## What ScrollReveal Does
- Animates elements when they scroll into the viewport for the first time
- Supports configurable origin directions (top, bottom, left, right)
- Offers customizable delay, duration, distance, and easing parameters
- Handles responsive behavior with container-scoped reveals
- Provides callback hooks for reveal and reset lifecycle events

## Architecture Overview
ScrollReveal works by registering target elements and storing their initial computed styles. It sets up an IntersectionObserver (or a scroll event fallback) to detect when elements enter the viewport. When triggered, it applies CSS transforms and opacity transitions with the configured parameters. The library maintains an internal store of all registered sequences, enabling coordinated reveal ordering across element groups.

## Self-Hosting & Configuration
- Install via npm or include from a CDN with a single script tag
- Initialize with ``ScrollReveal({ reset: true })`` to re-animate on every scroll
- Set global defaults by passing a config object to the constructor
- Use ``data-sr`` attributes for inline configuration when preferred
- Call ``ScrollReveal().destroy()`` during SPA route changes to clean up listeners

## Key Features
- Zero external dependencies at under 6 KB gzipped
- Works with any CSS framework or vanilla HTML
- Sequenced reveals with interval staggering across groups
- Mobile-friendly with automatic handling of reduced-motion preferences
- Supports custom containers for scrollable sub-sections

## Comparison with Similar Tools
- **AOS (Animate on Scroll)** — uses data attributes and CSS classes; ScrollReveal is fully JS-driven with finer control
- **GSAP ScrollTrigger** — more powerful but heavier; ScrollReveal is simpler for basic reveal effects
- **Framer Motion** — React-specific; ScrollReveal is framework-agnostic
- **Intersection Observer API** — native but low-level; ScrollReveal abstracts it with animation presets

## FAQ
**Q: Does ScrollReveal work with React or Vue?**
A: Yes, call ``ScrollReveal().reveal()`` inside lifecycle hooks like useEffect or onMounted.

**Q: Can I animate elements only once?**
A: By default elements animate once. Set ``reset: true`` to re-animate every time they re-enter the viewport.

**Q: Does it support reduced-motion preferences?**
A: ScrollReveal respects the ``prefers-reduced-motion`` media query automatically.

**Q: What browsers are supported?**
A: All modern browsers including Chrome, Firefox, Safari, and Edge.

## Sources
- https://github.com/jlmakes/scrollreveal
- https://scrollrevealjs.org

---
Source: https://tokrepo.com/en/workflows/asset-94a89dbd
Author: AI Open Source