Scroll-Driven Animations

# Scroll-Driven Animations

## Intersection Observer (entrance animations)
```ts
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible')
        observer.unobserve(entry.target)  // once
      }
    })
  },
  { threshold: 0.15, rootMargin: '0px 0px -50px 0px' }
)
document.querySelectorAll('[data-animate]').forEach(el => observer.observe(el))
```
```css
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger via delay */
[data-animate]:nth-child(2) { transition-delay: 0.1s; }
[data-animate]:nth-child(3) { transition-delay: 0.2s; }
```

## CSS Scroll-Driven Animations (Chrome 115+)
```css
/* Animation tied to scroll position -- no JS! */
@keyframes reveal {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card {
  animation: reveal linear both;
  animation-timeline: view();          /* ties to element's viewport entry */
  animation-range: entry 0% entry 40%; /* play during entry into viewport */
}

/* Progress bar tied to page scroll */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: #4ecdc4;
  transform-origin: left;
  animation: scaleX linear;
  animation-timeline: scroll(root);
}
@keyframes scaleX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
```

## CSS scroll-timeline (named)
```css
.gallery {
  scroll-timeline: --gallery inline;   /* horizontal scroll = inline axis */
}
.gallery-item {
  animation: slide-in linear both;
  animation-timeline: --gallery;
  animation-range: entry;
}
```

## Parallax
```css
/* Simple CSS parallax */
.parallax-section {
  transform-style: preserve-3d;
  perspective: 1px;
}
.parallax-bg {
  transform: translateZ(-1px) scale(2);
}
```
```ts
// JS parallax (more control)
const hero = document.querySelector('.hero-bg') as HTMLElement
window.addEventListener('scroll', () => {
  const y = window.scrollY
  hero.style.transform = `translateY(${y * 0.4}px)`
}, { passive: true })
```

## Sticky section with progress
```css
.sticky-section {
  position: sticky;
  top: 0;
  height: 100vh;
}
```
```ts
// Map scroll to animation progress
const section = document.querySelector('.sticky-section')!
const { top, height } = section.getBoundingClientRect()
window.addEventListener('scroll', () => {
  const progress = Math.max(0, Math.min(1,
    (window.scrollY - section.offsetTop) / (section.offsetHeight - window.innerHeight)
  ))
  // Use progress to drive animations: 0 -> 1
}, { passive: true })
```

## Horizontal scroll section
```css
.h-scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.h-scroll-item {
  flex: 0 0 100vw;
  scroll-snap-align: start;
  height: 100vh;
}
```

## prefers-reduced-motion
```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```