Scroll-Driven Animations - Replacing JavaScript with CSS Timelines

/* CSS — that's it. No JS. */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: blue;
  transform-origin: left;
  transform: scaleX(0);

  /* The magic: bind a keyframes animation to scroll progress */
  animation: grow-progress linear;
  animation-timeline: scroll();
}

@keyframes grow-progress {
  to { transform: scaleX(1); }
}

/* How it reads:
   - animation: grow-progress linear → standard animation, linear easing
   - animation-timeline: scroll() → but driven by scroll, not time
   - scroll() with no args → uses nearest ancestor scroll container (here: the page)
   - The keyframes go from scaleX(0) to scaleX(1) as scroll goes from 0% to 100% */

/* The indicator bar tracks THIS container's scroll progress */
.indicator {
  position: sticky;
  top: 0;
  height: 4px;
  background: blue;
  transform-origin: left;
  transform: scaleX(0);
  animation: grow-progress linear;
  animation-timeline: scroll(nearest);  /* nearest scrolling ancestor */
}

/* scroll() arguments:
   scroll()         → nearest ancestor scroll container
   scroll(self)     → this element IS the scroll container
   scroll(root)     → the document root scroller
   scroll(nearest)  → nearest ancestor (same as default) */

/* The reveal animation */
@keyframes fade-slide-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Apply to each item */
.reveal-item {
  animation: fade-slide-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

/* How it reads:
   - animation-timeline: view() → tied to this element's visibility
   - animation-range: entry 0% entry 100%
     → animate from "element just entering" to "element fully entered"
   - "both" fill mode keeps the end state after the animation completes */

/* Named ranges for view() timeline:

   cover    → full journey: first pixel enters to last pixel exits
   contain  → element is fully visible (both edges inside scrollport)
   entry    → element is entering (leading edge enters → trailing edge enters)
   exit     → element is exiting (leading edge exits → trailing edge exits)

   Usage: animation-range: <start-range> <start-%> <end-range> <end-%>
*/

/* Animate only during entry (fade in as it appears) */
animation-range: entry 0% entry 100%;

/* Animate during the full journey (parallax-style, always moving) */
animation-range: cover 0% cover 100%;

/* Animate only during exit (fade out as it leaves) */
animation-range: exit 0% exit 100%;

/* Start at 25% through entry, end at 75% through entry (compressed) */
animation-range: entry 25% entry 75%;

/* The text inside shifts at a slower rate via scroll-driven animation */
.parallax-bg h2 {
  animation: parallax-shift linear;
  animation-timeline: scroll(nearest);
}

@keyframes parallax-shift {
  from { transform: translateY(0); }
  to   { transform: translateY(-30px); }
  /* Moves 30px upward over the full scroll range —
     slower than the content, creating the parallax effect */
}

/* BEFORE (JavaScript) */
// Reading progress bar
window.addEventListener('scroll', () => {
  const progress = window.scrollY / (document.body.scrollHeight - window.innerHeight);
  bar.style.transform = `scaleX(${progress})`;
});

// Reveal on scroll (IntersectionObserver)
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) entry.target.classList.add('visible');
  });
});
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

/* AFTER (CSS only — all three effects) */
.progress-bar { animation: grow linear; animation-timeline: scroll(); }
.reveal       { animation: fade-in linear both; animation-timeline: view(); animation-range: entry; }
.parallax-bg  { animation: shift linear; animation-timeline: scroll(); }

/* === Properties === */
animation-timeline: scroll() | view() | auto | none | <custom-name>;
animation-range: normal | <range-start> <range-end>;

/* === scroll() function === */
scroll()              /* nearest scroll ancestor, block axis */
scroll(self)          /* this element is the scroller */
scroll(root)          /* document root scroller */
scroll(nearest)       /* nearest ancestor (default) */
scroll(self inline)   /* horizontal scrolling */

/* === view() function === */
view()                /* default: block axis, no inset */
view(inline)          /* track horizontal visibility */
view(block 50px)      /* add 50px inset (shrink the trigger zone) */

/* === animation-range values === */
animation-range: cover;               /* full element journey (default for view) */
animation-range: entry;               /* just the entry phase */
animation-range: exit;                /* just the exit phase */
animation-range: contain;             /* while fully visible */
animation-range: entry 0% entry 100%; /* explicit start/end within a range */

/* === Named timelines (for targeting a specific ancestor) === */
.scroller {
  scroll-timeline-name: --page-scroll;
  scroll-timeline-axis: block;
}
.animated-child {
  animation-timeline: --page-scroll;  /* explicitly reference that scroller */
}

/* === View timeline on a specific subject === */
.subject {
  view-timeline-name: --card-visibility;
  view-timeline-axis: block;
}
.related-element {
  animation-timeline: --card-visibility;  /* animate based on .subject's visibility */
}

/* Header shrinks as you scroll down the page */
.site-header {
  position: sticky;
  top: 0;
  animation: shrink-header linear both;
  animation-timeline: scroll();
  animation-range: 0% 30%;  /* only animate over first 30% of scroll */
}

@keyframes shrink-header {
  from { padding-block: 1.5rem; font-size: 1.2rem; }
  to   { padding-block: 0.5rem; font-size: 0.85rem; }
}

/* Feature detection — provide fallback for unsupported browsers */
@supports (animation-timeline: scroll()) {
  .progress-bar {
    animation: grow-progress linear;
    animation-timeline: scroll();
  }
}

/* Or just let it degrade gracefully:
   - Without support, animation-timeline is ignored
   - The element stays in its initial state (no animation plays)
   - This is usually acceptable — scroll effects are enhancement, not functionality */