{"id":2134,"date":"2024-05-10T06:50:18","date_gmt":"2024-05-10T12:50:18","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2134"},"modified":"2024-05-10T06:50:20","modified_gmt":"2024-05-10T12:50:20","slug":"using-css-scroll-driven-animations-for-section-based-scroll-progress-indicators","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/using-css-scroll-driven-animations-for-section-based-scroll-progress-indicators\/","title":{"rendered":"Using CSS Scroll-Driven Animations for Section-Based Scroll Progress Indicators"},"content":{"rendered":"\n

Scroll-Driven Animations<\/a> allow you to control animations based on the scroll progress of any particular element (often the whole document), or, a particular element\u2019s visibility progress within the document. These are view()<\/code> and scroll()<\/code> animations, respectively. Both useful! It can be useful to apply the animation directly to the element itself, for instance, a <section><\/code> sliding into place as it enters the viewport. That kind of thing is cool and useful, but have you thought about extending the effects of these animations beyond the elements triggering them?<\/p>\n\n\n\n

In CSS, the scroll-driven animations are effectuated using a couple of animation-timeline<\/code> functions: scroll()<\/code> and view()<\/code>. You can learn more about them here<\/a>.<\/p>\n\n\n\n

In this article, we\u2019ll use a view()<\/code><\/a> animation, combined with a CSS custom property declared with @property<\/code><\/a> to create a \u201ccurrently-viewing\u201d and section-based progress indicator for each section<\/code> of a page. This kind of thing can be useful, for example, for a long documentation page so a user can see where they are in it, and how far through their current section they are. Kind of like a reading-progress bar, but smarter, as it is aware of individual page sections.<\/p>\n\n\n\n

Here\u2019s a demo:<\/p>\n\n\n\n