scroll reveal entrance viewport intersection reveal content as user scrolls down animate sections into view on scroll progressive content disclosure content below the fold appears without visual cue page feels static during scroll need scroll-triggered entrance animation without JS
Scroll Reveal
Fetch snippet JSON:
curl https://webspire.de/snippets/scroll/reveal.json
Hero copy
First block fades up as it enters the scroll container.
Feature row
Supporting content follows as it crosses the entry threshold.
Stat block
Numbers arrive once this section reaches 30% entry.
CTA zone
Last card slides in when it enters the reading area.
Footer note
Even small elements get the entrance treatment.
Background
Customize
Quick Start
<div class="scroll-reveal">Appears on scroll</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 540 bytes · 26 lines
- Custom Properties
-
--reveal-distance--reveal-duration - Classes
-
.scroll-reveal
scroll reveal entrance viewport intersection
Elements reveal themselves as they scroll into the viewport using the CSS animation-timeline: view() API. No JavaScript needed.
Card grid with scroll reveal
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="scroll-reveal rounded-xl bg-white/10 p-6 text-white">
<h3 class="text-lg font-semibold">Feature One</h3>
<p class="mt-2 text-sm text-white/60">Description here.</p>
</div>
<div class="scroll-reveal rounded-xl bg-white/10 p-6 text-white">
<h3 class="text-lg font-semibold">Feature Two</h3>
<p class="mt-2 text-sm text-white/60">Description here.</p>
</div>
<div class="scroll-reveal rounded-xl bg-white/10 p-6 text-white">
<h3 class="text-lg font-semibold">Feature Three</h3>
<p class="mt-2 text-sm text-white/60">Description here.</p>
</div>
</div>