View Timeline Reveal
Native CSS scroll-driven reveal — items fade/translate in as they enter view, driven by animation-timeline: view() with zero JavaScript (no IntersectionObserver, no scroll listener). Correction (2026-09-20, was previously overstated here): Chrome/Edge have shipped this unflagged since Chrome 115 (July 2023) and Safari since Safari 26 (September 2025), but Firefox does NOT support it in stable — it still sits behind the layout.css.scroll-driven-animations.enabled flag (on by default only in Nightly), despite being a named Interop 2026 priority, so this is not yet Baseline. Unsupported browsers (Firefox stable included) just render the items static via @supports, so it degrades safely rather than breaking. (Vanilla example: live iframe preview + HTML/CSS tabs — scroll inside the box.)
<div class="vt-scroll">
<p class="vt-hint">Scroll ↓</p>
<div class="vt-item">Real-time analytics</div>
<div class="vt-item">Zero-JS reveal</div>
<div class="vt-item">Native scroll timeline</div>
<div class="vt-item">No IntersectionObserver</div>
</div>How it works
View Timeline Reveal is a hand-built scroll component in plain HTML and CSS — no React, no Tailwind, no framework at all. Paste it into any site as-is and it stays performant on real devices. It's free — copy the code above and ship it.
← Browse all components