← Modern UI
Scroll-Driven Animations
Probing…Scroll-Driven Animations is a web platform capability in the Modern UI category. Animations driven by scroll position, off the main thread. Supported in Chromium 115+ and Safari 26+; available behind a flag in Firefox.
Try it
Loading demo…
Code
.scroller {
scroll-timeline-name: --page;
scroll-timeline-axis: block;
}
.progress-bar {
animation-name: grow-progress;
animation-timeline: --page; /* linked to scroll, off main thread */
}
@keyframes grow-progress {
from { width: 0%; }
to { width: 100%; }
}Browser support
Chromium
115
Firefox
Behind a flag
Safari
26
Frequently asked questions
Which browsers support Scroll-Driven Animations?
Supported in Chromium 115+ and Safari 26+; available behind a flag in Firefox.
Does Scroll-Driven Animations require HTTPS?
No. Scroll-Driven Animations works without a secure context, though serving your site over HTTPS is always recommended.
What is Scroll-Driven Animations used for?
Animations driven by scroll position, off the main thread.
Can I try Scroll-Driven Animations in my browser?
Yes. shwcs.net runs a live Scroll-Driven Animations demo that probes your current browser and lets you try the API. Everything runs locally — nothing is sent anywhere.