Scroll Driven Animations Notebook

The CSS Animation Timeline, Unplugged From Time

Adam’s “notebook” demos are a playground of CSS experiments, from gradient text to accordions. The latest collection covers scroll-driven animations, and while the advanced effects are easy to gawk at, the opening examples reveal how deceptively simple the underlying idea is.

At its core, a scroll-driven animation is still a standard CSS animation—same keyframes, same properties—just assigned to a different timeline. Instead of the document clock that starts when the page renders, the animation proceeds based on scroll position.

The keyframes themselves look entirely ordinary:

@keyframes slide-in-from-left {
  from {
    transform: translateX(-100%);
  }
}

What changes is how the animation is triggered. Rather than setting a duration, you bind the animation to a scroll timeline:

li {
  animation: var(--animation) linear both;
  animation-timeline: view();
}

Note the absence of a duration value. On a scroll-based timeline, time isn't measured in seconds; it's measured in scroll progress, so no duration is needed.

The view() function plays a role similar to an Intersection Observer in JavaScript: the animation runs in relation to when the element enters and leaves the viewport, rather than the overall page scroll. That's opposed to scroll(), which tracks the entire scrollable container.

It's tempting to get lost in the flashier demos, but the key takeaway is this: scroll-driven animations don't introduce a parallel system. They're regular CSS animations with a different timeline driver.