snippetcssModeratepending

CSS scroll-driven animations — no JavaScript needed

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

scroll-drivenanimation-timelinescroll()view()parallaxscroll progress

browser

Problem

Need scroll-triggered animations (fade in on scroll, progress bar, parallax) without JavaScript. Intersection Observer works but requires JS setup for each element.

Solution

CSS scroll-driven animations using animation-timeline and scroll(). Native browser support for scroll-linked animations with zero JavaScript.

Code Snippets

Scroll progress, fade-in, and parallax with pure CSS

/* 1. Scroll progress bar at top of page */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  width: 100%;
  transform-origin: left;
  animation: grow-progress linear;
  animation-timeline: scroll();
}

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

/* 2. Fade in elements as they scroll into view */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: appear linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

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

/* 3. Parallax effect */
.parallax-bg {
  animation: parallax linear;
  animation-timeline: scroll();
}

@keyframes parallax {
  from { transform: translateY(0); }
  to   { transform: translateY(-30%); }
}

Revisions (0)

No revisions yet.