GhostReveal
The modern JavaScript scroll-reveal library
Scroll reveals that feel expensive and weigh nothing
npm i ghost-reveal
<div data-reveal>
Live demonstration
GhostReveal In Action #
fade
Fades in place. Opacity and blur, with no movement.
fade-up
Rises into place. This is the default.
fade-down
Drops into place from above.
fade-left
Moves left into place.
fade-right
Moves right into place.
zoom-in
Grows from 60% size into place.
zoom-out
Settles in from 120% size.
slide-up
Rises its own height into place.
flip-up
Rotates up into place.
The name is the attribute value. A bare data-reveal is fade-up, and every animation sharpens from a 4px blur.
The default
Zero config, already premium.
Each item below is just data-reveal, with data-reveal-stagger on the list. The fade rises 16px, goes from a 4px blur to sharp over 700ms on cubic-bezier(.16,1,.3,1), and only touches opacity, transform and filter.
- 01
Blur-to-sharp
4px blurA subtle focus pull as each element lands. Tune it with
data-reveal-blur. - 02
Expo-out easing
700msIt moves quickly at first, then settles softly. No bounce, no lag.
- 03
Smart stagger
per batchOnly elements revealed together are staggered, so later rows never wait.
- 04
No layout shift
CLS 0Nothing moves in layout, and there is never a sideways scrollbar.
- 05
Reduced motion
liveHonored as the setting changes. Content appears instantly, with no motion.
- 06
SPA-ready
autoContent added later is picked up on its own, so route changes just work.
Blur
Focus pull, from none to dreamy.
data-reveal-blur="0" for a crisp fade, or higher for a more cinematic arrival.
Crisp
Opacity and travel only.
Subtle
Barely noticed, clearly felt.
Cinematic
For hero moments.
Big moments
Large surfaces stay smooth.
All the work happens on the compositor (transform, opacity, filter). There are no scroll listeners: IntersectionObserver decides when, and the Web Animations API does the rest.
AOS-compatible
Every AOS animation name works.
Keep your data-aos markup. Fade, zoom, slide and flip, each with the same blur-fade polish. Horizontal slides never widen the page.
Dynamic content
New nodes reveal themselves.
Ghost Reveal watches the DOM by default with a cheap MutationObserver that only scans added subtrees. That covers framework route changes, infinite lists and CMS embeds.
Experimental · native scroll-driven
Scrubbed with ViewTimeline.
data-reveal-scrub ties progress to scroll position (no JS per frame) where ViewTimeline exists. Other browsers get the normal reveal.
Scroll me
Then scroll back up. It reverses.
zoom-in
The same keyframe data on a scroll timeline.
fade-left
Runs on the compositor in Chromium.
Start
One line.
<script src="https://unpkg.com/ghost-reveal@0.2/dist/ghost-reveal.umd.min.js" data-auto></script> <h2 data-reveal>Hello</h2> <img data-reveal="zoom-in" data-reveal-delay="150" src="…" alt="">