ScrollReveal — Animate Elements as They Scroll Into View

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