CSS Scroll-Driven Animations

What are Scroll-Driven Animations?

Scroll Progress Indicator

The classic use case: a progress bar that fills as you scroll down the page.

/* Scroll progress indicator */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(to right, #667eea, #764ba2);
  transform-origin: left;
  animation: grow-progress linear;
  animation-timeline: scroll();
}

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

scroll() Function Syntax

The scroll() function specifies which scroll container to track.

/* scroll() function syntax */
animation-timeline: scroll();              /* Nearest scroller, block axis */
animation-timeline: scroll(root);          /* Root scroller (viewport) */
animation-timeline: scroll(nearest);       /* Nearest ancestor scroller */
animation-timeline: scroll(self);          /* Element itself if scrollable */

/* With axis */
animation-timeline: scroll(root block);    /* Vertical scroll */
animation-timeline: scroll(root inline);   /* Horizontal scroll */
animation-timeline: scroll(root x);        /* X axis */
animation-timeline: scroll(root y);        /* Y axis */

/* Named scroll timeline */
.scroll-container {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: block;
  /* Shorthand: scroll-timeline: --my-scroller block; */
}

.animated-element {
  animation-timeline: --my-scroller;
}

View Progress Timeline

view() tracks an element's visibility in the viewport, perfect for scroll-reveal animations.

/* Reveal animation when element enters viewport */
.reveal-element {
  opacity: 0;
  transform: translateY(50px);
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Image zoom as it scrolls through viewport */
.zoom-image {
  animation: zoom linear both;
  animation-timeline: view();
  animation-range: contain 0% contain 100%;
}

@keyframes zoom {
  from { transform: scale(0.8); }
  to { transform: scale(1); }
}

Parallax Scrolling

Create parallax effects by animating elements at different rates relative to scroll.

/* Parallax scrolling effect */
.parallax-container {
  scroll-timeline-name: --parallax;
  overflow-y: scroll;
  height: 100vh;
}

.parallax-slow {
  animation: parallax-slow linear;
  animation-timeline: --parallax;
}

.parallax-fast {
  animation: parallax-fast linear;
  animation-timeline: --parallax;
}

@keyframes parallax-slow {
  from { transform: translateY(0); }
  to { transform: translateY(-50px); }
}

@keyframes parallax-fast {
  from { transform: translateY(0); }
  to { transform: translateY(-150px); }
}

Sticky Header Animation

A common pattern: header that shrinks and gains a background as you scroll.

/* Header that shrinks on scroll */
.header {
  position: sticky;
  top: 0;
  animation: shrink-header linear forwards;
  animation-timeline: scroll();
  animation-range: 0 200px;
}

@keyframes shrink-header {
  from {
    padding: 2rem 1rem;
    background: transparent;
  }
  to {
    padding: 0.5rem 1rem;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
}

/* Logo shrinks with header */
.header-logo {
  animation: shrink-logo linear forwards;
  animation-timeline: scroll();
  animation-range: 0 200px;
}

@keyframes shrink-logo {
  from { height: 60px; }
  to { height: 40px; }
}

Polyfill for Broader Support

The scroll-timeline polyfill provides support for Firefox and Safari while native support is pending.

<!-- Include polyfill for non-Chrome browsers -->
<script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>

<!-- Your CSS works the same way -->
<style>
.animated {
  animation: fade-in linear;
  animation-timeline: scroll();
}
</style>

CSS vs JavaScript Scroll Animations