🚨 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:
- Two Custom Properties are animated as you scroll:
--mm(minutes) and--ss(seconds) - Thanks to Houdini’s Properties and Values API, the values for
--mmand--sscan be interpolated between their start and end value. - 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: