scroll-driven-animations

name	scroll-driven-animations
description	Use when adding scroll-revealed content or parallax. Modern browsers support scroll-driven animations natively.

Scroll-Driven Animations

Scroll-driven = animation tied to scroll position. Modern CSS scroll-timeline. Use for: section reveals, parallax, progress indicators.

Native CSS scroll animations (2026)

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.section {
  animation: reveal-up linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

Browser support: Chrome, Edge, Firefox (2025+). Fallback for Safari with IntersectionObserver.

JS scroll animation patterns

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('revealed');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.scroll-reveal')
  .forEach(el => observer.observe(el));

Common patterns

1. Section fade-in on scroll (subtle reveal)
2. Parallax background (slight movement, lighter element)
3. Progress bar at top (reading progress)
4. Sticky header that transitions in
5. Image reveal (scaled up to fit on scroll)
6. Text staggered reveal (word-by-word)

Where this fits in the X3 empire

Used in CardPrepAI editorial content for section reveals.