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

🚨 UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite. This post details an older version of the syntax and has not been updated to reflect these changes.

Do note that the concept of a Scroll-Linked Animation still stands, it’s only the syntax that has changed since writing this. Please refer to https://developer.chrome.com/articles/scroll-driven-animations/ for an article with examples that use the updated syntax.

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:

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. 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.