Search pages

Search all CSS Showcase pages by name

CSS Scroll-Driven Animations

Animations that respond to scroll position — all in pure CSS. Create parallax effects, reveal animations, and scroll progress indicators without a single line of JavaScript.

Chrome 115+Edge 115+Firefox — Behind FlagSafari — In Development

The Future of Scroll Effects

For years, scroll-triggered animations required JavaScript libraries, scroll listeners, and performance concerns. CSS Scroll-Driven Animations changes the game — animations driven by scroll position, completely declarative.

Fade In on Scroll
This element uses animation-timeline: view() to fade in as it enters the viewport. In unsupported browsers it falls back to being fully visible.

Scroll Down

This element fades in as you scroll

css
Key Concepts
The four building blocks of scroll-driven animations.
animation-timeline

Links an animation to scroll position instead of elapsed time.

scroll()

Creates a timeline based on a scroll container's scroll position.

view()

Creates a timeline based on an element's visibility in the viewport.

animation-range

Controls precisely when the animation starts and ends during the scroll.

Scroll Progress Indicator

Create reading progress bars that fill as you scroll — perfect for blog posts and articles. The bar below tracks scroll position within its container.

Progress Bar
A progress bar driven by scroll position. Scroll the container below to see it fill.

Scroll this container to see the progress bar fill ↓

Section 1: Introduction

Scroll-driven animations replace heavy JavaScript scroll listeners with a declarative, browser-optimised approach.

Section 2: The API

The animation-timeline property accepts scroll() or view() as values to bind animations to scroll position.

Section 3: Practical Uses

From reading progress indicators to parallax backgrounds, scroll-driven animations cover a wide range of use cases.

Section 4: Performance

Because the browser owns the animation, it can run it on the compositor thread — no jank, no layout thrashing.

css

Reveal on Scroll

Elements animate into view as they enter the viewport — the classic 'scroll reveal' effect, now in pure CSS.

Reveal Cards
Cards that animate in with staggered delays using view() timeline. In supported browsers, scroll within the container to see them appear.
✨

Fade & Scale

Elements smoothly scale up from 80% while fading in from zero opacity.

💨

Slide Up

A translateY of 100px creates a natural upward slide-in motion.

⏱️

Staggered Timing

Use animation-delay to stagger cards for a cascading entrance effect.

css

Animation Range

The animation-range property controls precisely when an animation begins and ends relative to the scroll. Here are the key range values.

Range Values
Each range keyword defines a different relationship between element position and animation progress.
entry

Element is entering the viewport from below. 0% = just touching, 100% = fully inside.

exit

Element is leaving the viewport at the top. 0% = fully inside, 100% = just left.

cover

Entire journey from first pixel visible to last pixel gone. Combines entry and exit.

contain

Only while the element is fully contained within the viewport. Excludes partial visibility.

css

Browser Support

Scroll-Driven Animations are cutting-edge. Use feature detection to provide graceful fallbacks for browsers that don’t support them yet.

Progressive Enhancement
Use @supports to apply scroll-driven animations only in supported browsers.

Cutting-Edge Feature

Scroll-Driven Animations are very new!

  • Chrome 115+: Fully supported
  • Edge 115+: Fully supported
  • Firefox: Behind flag
  • Safari: In development

For production: Use progressive enhancement. The animations won't run in unsupported browsers, but your content will still be fully visible and usable.

css

Why This Matters

Scroll-Driven Animations eliminate common problems with JavaScript-based scroll effects.

The Advantages
Define what you want and let the browser handle the rest.
Performance

Browser-optimised, runs on the compositor thread — no jank.

No JavaScript

Pure CSS means no scroll listeners, no IntersectionObserver, no libraries.

Declarative

Define the animation and its trigger — the browser handles scheduling.

Accessibility

Automatically respects prefers-reduced-motion when combined with media queries.

Keep Learning

Explore related animation and modern CSS features.

Related Features

CSS Animations

Master keyframe animations before diving into scroll-driven effects.

CSS Transitions

Learn the foundations of CSS animation timing and easing functions.

:has() Selector

Another game-changing modern CSS feature for powerful selectors.