v146 · CSS · Scroll Position Demo

Scroll Position Demo

Several scroll-triggered patterns: a page-level reading progress bar (animation-timeline: scroll(root)), a list where each item reveals as it enters the viewport, and statistics that animate in with a stagger. Scroll down to see all three in action.

Chrome 146 required for animation-trigger. The page progress bar uses animation-timeline: scroll(root) (Chrome 115+). Both fall back to JavaScript if unsupported.

list reveal on scroll

Each item slides in from the left as it enters the viewport. Scroll slowly to see each one trigger independently.

statistics reveal

Three stat cards scale in with a stagger when they enter the viewport. Uses animation-delay on each nth-child.

146
Chrome version
0
Lines of JavaScript needed
∞
Elements you can animate

code

/* Reading progress bar — scroll-driven (Chrome 115+) */
@keyframes grow-bar {
  from { width: 0%; }
  to   { width: 100%; }
}

.progress-fill {
  animation: grow-bar linear both;
  animation-timeline: scroll(root);
}

/* List reveal — scroll-triggered (Chrome 146+) */
@keyframes reveal-item {
  from { opacity: 0; translate: -1rem 0; }
  to   { opacity: 1; translate: 0 0; }
}

@supports (animation-trigger: view()) {
  .list-item {
    animation: reveal-item 0.4s ease both;
    animation-trigger: view(block 5% 95%);
  }
}

/* Stat cards — staggered entry */
@supports (animation-trigger: view()) {
  .stat-card {
    animation: count-up 0.5s ease both;
    animation-trigger: view(block 5% 95%);
  }
  .stat-card:nth-child(2) { animation-delay: 0.1s; }
  .stat-card:nth-child(3) { animation-delay: 0.2s; }
}

see also