Scroll animations

Scroll-driven animation ties motion to scroll position instead of a clock.

If it doesn't serve orientation, feedback, or continuity, remove it.

CSS scroll-driven animations

Scroll progress timeline

animation-range: 0% 30% means the animation completes at 30% scroll depth.

View progress timeline

entry 0% = first touches the viewport. entry 100% = fully visible.

IntersectionObserver patterns

Paired with CSS:

Parallax

scale(2) compensates for size reduction from the Z-axis offset.

Use for: Hero sections, landing pages. Skip on: Content-heavy pages, documentation, dashboards, mobile.

Performance

Only animate transform and opacity.

Batch JavaScript scroll handlers with requestAnimationFrame:

Accessibility

Common mistakes

Scroll-jacking. Hijacking native scroll breaks back/forward, bookmarks, find-on-page, and screen readers.

Hiding content behind scroll. Reveal content already in the DOM with opacity: 0, not dynamically injected content.

Momentum scroll on mobile. iOS fires scroll events at irregular intervals. Keep mobile scroll animations to IntersectionObserver triggers, not continuous scrubbing.