@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:
- Thanks to Houdini’s Properties and Values API, the values for
--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)
👨🏫 Unfamiliar with Scroll-Linked Animations / CSS Scroll-Timeline? Here’s two (extensive) articles that explain the whole thing: