🚨 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.
@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: