CSSScroll AnimationsAnimation TimelineModern CSS

Scroll-Driven Animations: Pure CSS Scroll Effects No JS Required

CSS Scroll Timeline and Animation Timeline turn scroll position into an animation driver — creating parallax, reveal, progress bars, and sticky effects with zero JavaScript.

U

UIXplor Team

February 25, 2026 · 7 min read

✦

01The animation-timeline Property

Scroll-driven animations link an element's animation to scroll position:

css
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 100%;
  background: #B8FB3C;
  transform-origin: left;
  animation: progress linear;
  animation-timeline: scroll(root block);
}
@keyframes progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

`scroll(root block)` means 'use the root element's block-axis scroll position'.

02view() for Reveal Animations

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

`view()` tracks when the element enters/exits the viewport. `animation-range: entry 0% entry 40%` means the animation plays during the first 40% of the element entering view.

03Parallax Effect (Pure CSS)

css
.parallax-image {
  animation: parallax linear;
  animation-timeline: scroll(nearest block);
}
@keyframes parallax {
  from { transform: translateY(-20%); }
  to   { transform: translateY(20%); }
}

This creates a parallax scroll effect — the image moves at a different rate than the page scroll.

Related UI Components

◈

Collections

All UI component collections

Back to Blog