February 9th, 2025

Scroll-Driven Animations

Scroll-driven animations improve web interactivity by linking animations to scroll position. New APIs enable smoother off-main-thread animations, with demos, a free video course, and a debugging extension available.

Read original articleLink Icon
Scroll-Driven Animations

Scroll-driven animations are a popular user experience feature on the web, allowing animations to respond directly to the scroll position of a container. This technique enhances interactivity, enabling effects like parallax backgrounds and fading elements as they come into view. Traditionally, achieving smooth scroll-driven animations was challenging due to performance issues when responding to scroll events on the main thread. However, the introduction of the Scroll-driven Animations specification provides new APIs that work alongside the existing Web Animations API (WAAPI) and CSS Animations API, allowing for smoother animations that can run off the main thread with minimal code. The website offers various demos showcasing these animations, including reading progress indicators, carousels, and 3D models that rotate as users scroll. Additionally, a free 10-part video course is available to educate users on implementing scroll-driven animations, covering core concepts and practical applications. A Chrome DevTools extension is also provided for debugging and visualizing these animations. The site is developed by Bramus, a Developer Relations Engineer at Google, and emphasizes the ease of integrating scroll-driven animations into web projects.

- Scroll-driven animations enhance user experience by linking animations to scroll position.

- New APIs allow for smoother animations running off the main thread.

- The site features various demos and tools for implementing scroll-driven animations.

- A free video course is available to teach users about scroll-driven animations.

- A Chrome DevTools extension aids in debugging and visualizing these animations.

Link Icon 22 comments
By @neilv - 2 months
There might be some good uses for these effects, but IMHO this particular Web page is an argument against them.
By @incognito124 - 2 months
Genuine question: do people like having their websites move around while scrolling? Just show me the text
By @Diti - 2 months
This is the very first website I have ever stumbled upon that made me physically ill (nausea) from the motion. WOW.
By @lapcat - 2 months
[self-promotion] My paid browser extension for Mac and iOS has a "Stop animations" feature if this kind of stuff drives you mad: https://apps.apple.com/app/stopthemadness-pro/id6471380298
By @ergonaught - 2 months
People who read don’t want this garbage. If your content must be read, don’t use this garbage.
By @Brajeshwar - 2 months
Almost all the scroll-driven animations add no particular value. However, when it does, it does, just like every successful website, go back to being a tad boring and to the point, with precise information and bringing the Bottom Line Up Front.

When SVG animation was beginning to be widely supported by modern browsers (about 10+ years ago), a friend did a CSS-enabled SVG animation for a company’s website that explained “How it works” as the user scrolls the website. It worked, and the most asked question of “how it works” support ticket drops, thus increasing conversion and trust.

The website was for a hardware company in California that serves B2B customers with MIPS-based networks, video and security processors, etc.

By @Imustaskforhelp - about 2 months
I actually really like the scroll bar at the top , I also like the general style of your website.

https://scroll-driven-animations.style/demos/progress-bar/cs...

I was going to ask you to provide source code but it turns that its hand crafted css / js / html

so I am probably going to create a hugo plugin and transform into this (though I would really really like it if somebody could write a dark mode , though I just tried dark reader and its also really nice , feels like magic , but I am going to create a dark button on the top , and change the width of red and maybe the color as well and it could be so cool.

Thanks a lot man

A lot of people are saying , why do you need this , I wouldn't over use it on every page , but I like this , I genuinely do though I also prefer simplicity.

I think that a guy should have two parts of a guide while still adhering to the same guide , maybe have the frontpage a little bit more scroll driven animations , heck three js if you want , but it shouldn't be on my face kind of animations

But keep the inner documentation smooth and simple , pure static html

By @oulipo - 2 months
The best ones are in the NYtimes long form articles, it would be cool for them to open-source their framework
By @vivzkestrel - 2 months
The way the article is titled, I was expecting a virtual list or virtual scroll. Now that would be one of the most useful things to talk about. How to virtual scroll 10000 items with different heights. 1) When user can provide heights and 2) when everything has to be rendered on the fly
By @Imustaskforhelp - about 2 months
This shows a jitter of dead pixels , which isn't shown if its full screen on chromium https://scroll-driven-animations.style/demos/cover-to-fixed-...

https://ibb.co/qFy7YnTF

By @trallnag - about 2 months
I don't really like it on "normal" websites, but for art projects it's great. For example, I recently came across https://www.aquarium.ru, a page dedicated to Aquarium, a Russian band
By @reportgunner - 2 months
I'm happy to see that only one of those animations work in the browser I used.
By @lelandfe - 2 months
Super neat. Worth noting that some of these, e.g. Reverse-Scrolling Columns and Horizontal Scroll Section, kill the ability to use the macOS trackpad to swipe through history on Chrome.
By @dreamcompiler - 2 months
I hate these things but they're not made for you and me. They're made for some VP who pays the developer's salary.

Most VPs think the point of their website is to impress rather than to inform. I'm only impressed by websites that do inform, but I'm rarely the person who writes a check to the company with the impressive website. That person is ... another VP.

By @jojobas - 2 months
God I hate it.
By @jdjdjdjdjd - 2 months
I can't stand websites that do this kind of thing. Just distracting and adds nothing.
By @namuol - 2 months
The neon signage of our time
By @ubertaco - 2 months
Basically the modern <blink> or <marquee> tag.
By @zzzbra - 2 months
When did we stop referring to this as Parallax Effects
By @emmanueloga_ - 2 months
I feel like people are being overly critical of this work. When used sparingly, scrolling effects can add charm to marketing pages and portfolios, and I've seen some great uses on so called "explorable explanations" and other long form articles.

The main objective seems to be advocacy/evangelism on new browser animation APIs, which I welcome [1].

... I agree that the top mouse animation is, errr... a bit ugly, though :-).

--

1: https://scroll-driven-animations.style/#links

By @tomkaos - 2 months
Not really useful when it's not support on most recent Firefox version.