CSS scroll-driven animations

<div class="wrap">
    <h1>🎞️ Scroll-driven animations — no listeners</h1>
    <p class="sub">
      Scroll the panel below. The top bar is bound to scroll with
      <code>animation-timeline: scroll()</code>; the cards reveal with
      <code>view()</code>. Zero JavaScript drives the motion. Change the
      <b>range</b> to feel each phase — including <b>in &amp; out</b>, which
      reverses as a card leaves the top.
    </p>

<div class="demo">
      <div class="controls" role="group" aria-label="animation-range preset">
        <span class="lbl">range</span>
        <button data-range="entry"   aria-pressed="true">reveal in</button>
        <button data-range="contain" aria-pressed="false">while crossing</button>
        <button data-range="exit"    aria-pressed="false">fade on exit</button>
        <button data-range="inout"   aria-pressed="false">in &amp; out</button>
        <button id="top" style="margin-left:auto">↑ reset</button>
      </div>

<code class="chip" id="css">animation-range: entry 0% entry 100%;</code>

<div class="scroller" id="scroller" tabindex="0" aria-label="scrollable demo panel">
        <p class="hint">↓ scroll me ↓</p>
        <div class="cards r-entry" id="cards">
          <div class="card"><span class="n">1</span><span><b>Bound to scroll position</b><small>not time — scroll up and it plays backward</small></span></div>
          <div class="card"><span class="n">2</span><span><b>view() = IntersectionObserver</b><small>…that you never had to write</small></span></div>
          <div class="card"><span class="n">3</span><span><b>Runs off the main thread</b><small>on the compositor — no jank</small></span></div>
          <div class="card"><span class="n">4</span><span><b>animation-range picks the phase</b><small>entry · contain · exit</small></span></div>
          <div class="card"><span class="n">5</span><span><b>One CSS rule</b><small>no observers, no classList toggles</small></span></div>
          <div class="card"><span class="n">6</span><span><b>Progressive enhancement</b><small>@supports guards it; old browsers just skip</small></span></div>
        </div>
        <p class="end">Now scroll back up — with <b>in &amp; out</b> the cards fade away as they exit.</p>
      </div>
    </div>

<div class="nosupport">
      Your browser doesn't support <code>animation-timeline</code> yet — the whole point of the post!
      Try the latest Chrome or Firefox, or Safari 18+, to see the demo.
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.