#scroll-driven-animations
LightNews LightNews
bram.us
Following my Scroll-Driven Animations Debugger Extension for Chrome DevTools, I’m working on a similar extension to help you debug Scroll-Triggered Animations.

Sneak peek: youtu.be/C5hn16x31I8

WDYT? Any features you want to see?
Scroll-Triggered Animations Debugger Extension (Preview)
YouTube video by Bramus
youtu.be
October 12, 2026 at 12:50 PM
nerdy.dev
very cool work done here to use #CSS scroll snap for gesture powered bottom sheets

github.com/viliket/pure...
GitHub - viliket/pure-web-bottom-sheet: A performant, lightweight, and accessible bottom sheet web component powered by CSS scroll snap and CSS scroll-driven animations. Works with any framework, supp...
A performant, lightweight, and accessible bottom sheet web component powered by CSS scroll snap and CSS scroll-driven animations. Works with any framework, supports SSR, multiple snap points, and n...
github.com
October 7, 2026 at 7:07 PM
kizu.front-end.social.ap.brid.gy
@nikitonsky ok, but what if we could control the volume of audio or video tags just with CSS scroll-driven animations
October 13, 2026 at 7:40 PM
frontenddogma.com
Transferring “sibling-count()” to a Parent Element, by @css@front-end.social (@frontendmasters.com):

https://blog.master.dev/transferring-sibling-count-to-a-parent-element/?ref=frontenddogma.com

#css #functions #scrolling #animations
Transferring sibling-count() to a Parent Element
Discover how to count children in CSS using hacks with Scroll-Driven Animations. Learn techniques to transfer values effectively!
blog.master.dev
October 13, 2026 at 6:30 AM
lloveras.info
Inspired by the Jetsons
#googie #retrofuturism #css
#css, #svg, #scroll-driven-animations
#corner-shape, #border-shape, #css-shapes

codepen.io/editor/Sensi...
Skyhaven: a Googie-inspired website
retro, space-age, atomic-age, 1960s, no-javascript, css-only, dark-mode, light-dark, clip-path, ui-design googie, retrofuturism, css, svg, scroll-driv
codepen.io
October 12, 2026 at 11:10 PM
css-only.dev
📝 New CSS Article!

With Scroll-Driven Animations, you can transfer a value from one element to another anywhere on the page. I am using it to implement children-count().

Strange? Confusing? What the heck am I talking about?!

Read my latest article 👇

blog.master.dev/transferring...
Transferring sibling-count() to a Parent Element
Discover how to count children in CSS using hacks with Scroll-Driven Animations. Learn techniques to transfer values effectively!
blog.master.dev
October 5, 2026 at 1:36 PM
frontendmasters.com
Transferring sibling-count() to a Parent Element

You can tell a parent element how many children it has with... scroll-driven animations??
Transferring sibling-count() to a Parent Element
Discover how to count children in CSS using hacks with Scroll-Driven Animations. Learn techniques to transfer values effectively!
blog.master.dev
October 5, 2026 at 2:39 PM
sebastienlorber.com
👀 CSS scroll-driven animations - soon available everywhere

Going to land in Firefox 159, the last major browser
October 5, 2026 at 2:24 PM
xrtech.dev
threesided.com/lab: WebGPU compute particles, a WebGL2 fluid sim, Houdini paint, AudioWorklet — one page per experiment with the code shown. A good reference for what the modern web stack can do in the browser with no plugin. #webgpu #webgl
Lab — threesided
A playground for bleeding-edge web experiments — WebGPU compute particles, a WebGL2 fluid sim, CSS Houdini paint, native scroll-driven animations, anchor positioning, AudioWorklet, Three.js, GLSL, view transitions.
threesided.com
October 13, 2026 at 2:45 AM
randynorthrup.bsky.social
CSS now has container queries, :has(), native nesting, scroll-driven animations and anchor positioning. A lot of 2019-era JavaScript can simply be deleted.
October 8, 2026 at 8:46 AM
granpai.bsky.social
16 new CSS features in 35 seconds 👀

Anchor positioning, if(), masonry, scroll-driven animations, squircles and more. Less JavaScript, live demos.

One feature a day, starting Monday Oct 12. Follow so you don't miss it.
Made by GranpAI
October 9, 2026 at 11:32 AM
kevinpowell.co
Nice, new video idea! How to use scroll-driven animations to scrolljack.... I mean, if we're going to do it, at least don't use JS 😅
October 6, 2026 at 4:38 PM
web-standards.dev
Transferring sibling-count() to a parent element. @css-only.dev turns sibling-count() of an extra child into a variable on the parent using scroll-driven animations, a CSS-only stand-in for the proposed children-count(). #css #scroll

blog.master.dev/tran...
Title “Transferring sibling-count() to a Parent Element”, a “Show All The Replies (6)” list of comments with avatars, a red M logo, and a cartoon avatar of the author in a cap.
October 6, 2026 at 4:06 PM
utilitybend.com
Next up, @cydstumpel.nl on scroll driven animations, view transitions and a quick glimpse to scroll triggered animations. #fronteers #darkmode
Cyd in front of slide with text: creative developer
October 2, 2026 at 3:23 PM
developer.chrome.com
Loved scroll-driven animations? Meet their scroll-triggered sibling.

Instead of tying animation progress directly to the scrollbar, you can trigger full time-based CSS animations when crossing a scroll offset.

See how to build them with pure CSS → goo.gle/4dhcvmh
September 30, 2026 at 8:30 PM
srueegger.swiss.social.ap.brid.gy
Ist Firefox der neue Internet Explorer?

Ich habe 12 moderne Webfunktionen nachgeprüft. Bei 11 war Firefox der letzte Browser, oft mit 2 bis 4 Jahren Rückstand. Scroll-driven Animations und View Transitions zwischen Seiten fehlen auch in Firefox 157 noch, WebGPU läuft unter Linux bis heute nicht […]
Original post on swiss.social
swiss.social
October 2, 2026 at 1:49 PM
webdevs.firefox.com
It's part of Interop 2026, so it's on its way. Although, scroll-driven-animations will land first.
September 29, 2026 at 2:43 PM
developer.chrome.com
Teach your coding agent to write scroll-driven animations with Modern Web Guidance → goo.gle/mwg

See how Modern Web Guidance helps your coding agent build resilient scroll animations that won't break on different screen sizes.
September 29, 2026 at 7:17 PM
xrfolio.page
threesided keeps a lab page of three.js experiments, most of them running full-bleed with no chrome around them.

Steal this: a live demo that fits the screen and loads instantly does more convincing than a screenshot of the same thing. #threejs #webgl
Lab — threesided
A playground for bleeding-edge web experiments — WebGPU compute particles, a WebGL2 fluid sim, CSS Houdini paint, native scroll-driven animations, anchor positioning, AudioWorklet, Three.js, GLSL, view transitions.
threesided.com
October 2, 2026 at 3:00 PM
ingstudios.dev
Hey, turtlebrowse.ingstudios.dev is all about those scroll driven animations!
Turtlebrowse - The Open Source Web Browser Built for the Agentic Era
Turtlebrowse is a Material You themed JVM based agentic browser made with the Java Chromium Embedded Framework.
turtlebrowse.ingstudios.dev
September 30, 2026 at 11:43 PM
css-only.dev
💡 CSS Tip!

Want to know how many children your container has? We don't have children-count() yet, but we can implement it using modern CSS!

css-tip.com/children-cou...

A hacky experiment powered by Scroll-Driven Animations.

How would you use it? Share your use cases 👇
There is no important content in this image; I just need an image to make the post look nicer.
September 29, 2026 at 10:18 AM
isolte.bsky.social
The scroll-driven animations drive me nuts.
September 27, 2026 at 4:14 PM
intenttoship.dev
Gecko: Intent to Ship: Scroll-driven Animations
Gecko: Intent to Ship: Scroll-driven Animations
Gecko: Intent to Ship: Scroll-driven Animations
groups.google.com
September 25, 2026 at 7:20 PM
bram.us
The time to ramp up your scroll-driven animations skills is **NOW**

Go check scroll-driven-animations.style for and free 10-part video course created by yours truly, as well as a bunch of tools and demos.
September 25, 2026 at 7:51 PM
ishadeed.com
Thank you! I noted at the beginning of the article that the demos work in browsers that support scroll-driven animations and anchor positioning.

Maybe I should move it to the very beginning to make it clearer.
a screenshot from the blog post shows a note about the demos: "The demos in this article work in browsers that support both scroll-driven animations and anchor positioning".
September 27, 2026 at 4:33 PM