# Scroll progress animations in CSS

DevFeed: [Scroll progress animations in CSS](<https://devfeed.tech/articles/scroll-progress-animations-in-css-4113.md>)

Original publisher: [Read original article](<https://developer.mozilla.org/en-US/blog/scroll-progress-animations-in-css/>)

Author: michelle-barker

Published: 2023-07-14T00:00:00Z

Content type: article

Language: en

Sources: [MDN Blog](<https://devfeed.tech/sources/mdn-blog.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>), [Chrome Canary](<https://devfeed.tech/topics/chrome-canary.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [article](<https://devfeed.tech/tags/article.md>), [chrome-canary](<https://devfeed.tech/tags/chrome-canary.md>), [css](<https://devfeed.tech/tags/css.md>), [examples](<https://devfeed.tech/tags/examples.md>), [experimental](<https://devfeed.tech/tags/experimental.md>)

## AI overview

This article introduces scroll-driven animations in CSS, focusing on Scroll Progress Timeline. It explains how to connect an animation, such as a progress bar scaling from left to right, to the scroll progress of a page or container.

## Source excerpt

Scroll-driven animations are coming to CSS! In this post, we'll look at a few types of animations and learn how to link them to the scroll progress of a container.