Scroll-Driven Animations

CSS Scroll-Driven Animations API provides performant, declarative scroll-linked animations without JavaScript. Supported in Chrome 115+, Edge 115+, Safari 18.4+.

Overview

• Progress indicators tied to scroll position
• Parallax effects without JavaScript jank
• Element reveal animations on scroll into view
• Sticky header animations based on scroll
• Reading progress bars
• Scroll-triggered image/content reveals

Core Concepts

Timeline Types