# Scroll-Driven Animations

Published articles for Scroll-Driven Animations.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Extracting Grid Information Using CSS

DevFeed: [Extracting Grid Information Using CSS](<https://devfeed.tech/articles/extracting-grid-information-using-css-50970.md>)

Original publisher: [Read original article](<https://blog.master.dev/extracting-grid-information-using-css/>)

Author: Temani Afif

Published: 2026-09-16T19:02:13Z

Content type: tutorial

Language: en

Sources: [Master.dev Blog RSS Feed](<https://devfeed.tech/sources/master-dev-blog-rss-feed.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [blog-post](<https://devfeed.tech/tags/blog-post.md>), [css](<https://devfeed.tech/tags/css.md>), [custom-properties](<https://devfeed.tech/tags/custom-properties.md>), [dev-tools](<https://devfeed.tech/tags/dev-tools.md>), [edge](<https://devfeed.tech/tags/edge.md>), [grid](<https://devfeed.tech/tags/grid.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [responsive](<https://devfeed.tech/tags/responsive.md>), [scroll-driven-animations](<https://devfeed.tech/tags/scroll-driven-animations.md>)

### AI overview

This tutorial explains how to extract grid positions, row counts, and column counts for randomly placed CSS Grid items that can span multiple rows and columns. It presents a pure CSS implementation, a responsive demo, and its browser-support limitations.

### Source excerpt

It's an interesting and potentially useful trick to have an element know where it is on a grid. That's tricky enough when the items are in one row/column, but what about when they span?

## Custom Scrollbar Component In 2026

DevFeed: [Custom Scrollbar Component In 2026](<https://devfeed.tech/articles/custom-scrollbar-component-in-2026-50969.md>)

Original publisher: [Read original article](<https://blog.master.dev/custom-scrollbar-component-in-2026/>)

Author: Alexander Inkin

Published: 2026-09-07T15:37:37Z

Content type: tutorial

Language: en

Sources: [Master.dev Blog RSS Feed](<https://devfeed.tech/sources/master-dev-blog-rss-feed.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [animations](<https://devfeed.tech/topics/animations.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [blog-post](<https://devfeed.tech/tags/blog-post.md>), [css](<https://devfeed.tech/tags/css.md>), [design-system](<https://devfeed.tech/tags/design-system.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [firefox-nightly](<https://devfeed.tech/tags/firefox-nightly.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [scroll-driven-animations](<https://devfeed.tech/tags/scroll-driven-animations.md>), [scrollbars](<https://devfeed.tech/tags/scrollbars.md>), [scrolling](<https://devfeed.tech/tags/scrolling.md>)

### AI overview

A tutorial on building a custom scrollbar component with modern CSS. It explains how scroll-driven animations can handle scrollbar sizing, positioning, and updates without JavaScript, while also discussing anchor positioning and accessibility considerations.

### Source excerpt

Thanks to some very modern CSS, we can visually replicate the logic of scrollbars. Then make them actually functional.

## Scroll-Driven Animations

DevFeed: [Scroll-Driven Animations](<https://devfeed.tech/articles/scroll-driven-animations-45168.md>)

Original publisher: [Read original article](<https://www.joshwcomeau.com/animation/scroll-driven-animations/>)

Author: Josh W. Comeau

Published: 2026-04-28T12:00:00Z

Content type: tutorial

Language: en

Sources: [Josh Comeau's blog](<https://devfeed.tech/sources/josh-comeau-s-blog.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [animations](<https://devfeed.tech/topics/animations.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [animations](<https://devfeed.tech/tags/animations.md>), [api](<https://devfeed.tech/tags/api.md>), [css](<https://devfeed.tech/tags/css.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [scroll](<https://devfeed.tech/tags/scroll.md>), [scroll-driven-animations](<https://devfeed.tech/tags/scroll-driven-animations.md>)

### AI overview

This tutorial explains how the CSS Animation Timeline API enables scroll-driven animations without JavaScript. It covers mapping keyframes to scroll progress, viewport-based inputs, timing functions, and implementation gotchas.

### Source excerpt

The new Animation Timeline API allows us to create dynamic scroll animations without any JavaScript! It's honestly a very lovely API, and in this blog post, we'll explore some of the super cool things we can do with it.