A “Pure CSS” Remaining Reading Time Indicator with @scroll-timeline

Using @scroll-timeline from the Scroll-Linked Animations Specification, Fabrizio Calderan has created a very nice demo which shows the remaining reading time. As you scroll down, the time counts down to 0.

📽 Using a browser with no support for Scroll-Linked Animations? Here’s a recording you can watch:

There’s a few tricks Fabrizio uses there to achieve the result:

  1. Two Custom Properties are animated as you scroll: --mm (minutes) and --ss (seconds)
  2. Thanks to Houdini’s Properties and Values API, the values for --mm and --ss can be interpolated between their start and end value.
  3. As it’s not possible to inject the values of Custom Properties using ::after, an intermediate step using CSS Counters is used: the Custom Properties manipulate the CSS Counter values, and the values of those Counters then get injected into the page (similar to what Jhey did in his pure CSS Stopwatch)

Tell your users the remaining reading time, in CSS →


👨‍🏫 Unfamiliar with Scroll-Linked Animations / CSS Scroll-Timeline? Here’s two (extensive) articles that explain the whole thing:

About the author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.