scroll clip-path reveal progress intersection-observer mask scroll-linked image reveal progressive content unmasking parallax-style section entrance one-shot reveal animations feel abrupt need scroll-proportional reveal without scroll events want clip-path tied to scroll position
Clip Reveal Scroll
Fetch snippet JSON:
curl https://webspire.de/snippets/scroll/clip-reveal-scroll.json Design systems at scale
Motion that feels natural
Every detail considered
Background
Customize
Quick Start
<div class="clip-reveal-scroll">...</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 376 bytes · 20 lines
- Custom Properties
-
--clip-direction - Classes
-
.clip-reveal-scroll
scroll clip-path reveal progress intersection-observer mask
An element hidden by clip-path: inset() that reveals progressively as the user scrolls. Uses IntersectionObserver with multiple thresholds (no scroll event polling) to map intersection ratio to clip-path.
Basic usage
<div class="clip-reveal-scroll">
<div class="h-64 w-full rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600"></div>
</div>JavaScript companion
const el = document.querySelector('.clip-reveal-scroll');
const thresholds = Array.from({ length: 50 }, (_, i) => i / 50);
new IntersectionObserver(([entry]) => {
const ratio = Math.round(entry.intersectionRatio * 100);
el.style.clipPath = `inset(0 ${100 - ratio}% 0 0)`;
}, { threshold: thresholds }).observe(el);Right-to-left variant
<div class="clip-reveal-scroll" data-direction="right">
<div class="h-64 w-full rounded-xl bg-gradient-to-l from-emerald-500 to-teal-600"></div>
</div>