[software] Kevin Powell Scroll-Driven View Timeline Reference Example

From Liel Ben Or liel4349@gmail.com, Wed, 28 Oct 2026 23:05:53 -0700

Here is the fully working reference example for pure CSS scroll-driven view timelines based on Kevin Powell's walkthrough, ready to be dropped into any project as a reference.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Kevin Powell - Scroll-Driven View Animations</title>
  <style>
    :root {
      color-scheme: dark;
    }

    body {
      background-color: #0d1117;
      color: #e6edf3;
      font-family: system-ui, -apple-system, sans-serif;
      max-width: 650px;
      margin: 0 auto;
      padding: 150px 20px 400px 20px;
    }

    h1 {
      font-size: 2.2rem;
      margin-bottom: 4rem;
      border-bottom: 1px solid #30363d;
      padding-bottom: 1rem;
    }

    @keyframes fade-in-out {
      0% {
        opacity: 0.05;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0.05;
      }
    }

    .counter-list {
      counter-reset: item;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .counter-list li {
      counter-increment: item;
      position: relative;
      padding-left: 5.5rem;
      margin-bottom: 8rem;
      
      /* Stable view timeline binding on the list item */
      animation: fade-in-out linear;
      animation-timeline: view();
      animation-range: entry 20% cover 120%;
    }

    .counter-list li::before {
      content: counter(item, decimal-leading-zero);
      position: absolute;
      left: 0;
      top: -1.2rem;
      font-size: 6rem;
      font-weight: 900;
      line-height: 1;
      color: #38bdf8;
      pointer-events: none;
    }

    .counter-list li h2 {
      font-size: 1.5rem;
      margin: 0 0 0.5rem 0;
      color: #f0f6fc;
    }

    .counter-list li p {
      margin: 0;
      color: #8b949e;
      font-size: 1.05rem;
      line-height: 1.6;
    }
  </style>
</head>
<body>

  <h1>CSS Demystified Landing Page</h1>

  <ol class="counter-list">
    <li>
      <h2>The CSS Mindset</h2>
      <p>Understanding how the browser parses and renders elements without throwing random hacks at it.</p>
    </li>
    <li>
      <h2>Layout Mastery</h2>
      <p>Mastering Flexbox and Grid fundamentals for robust, scalable layouts across viewports.</p>
    </li>
    <li>
      <h2>Responsive Design Without Media Queries</h2>
      <p>Building fluid typography and layouts using clamp, min, and max functions.</p>
    </li>
    <li>
      <h2>Scroll-Driven Animations</h2>
      <p>Leveraging view timelines and ranges natively in CSS without a single line of JavaScript.</p>
    </li>
  </ol>

</body>
</html>