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 …

Practical Use Cases for Scroll-Linked Animations with CSS Scroll-Timeline

As a follow-up to my two posts on Scroll-Linked Animations with CSS Scroll-Timeline (part 1 and part 2), I wrote an article for CSS-Tricks covering some practical use-cases (with code). Today the article got published 🙂 Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines →

Scroll-Linked Animations with CSS Scroll-Timeline (CSS Café)

Yesterday I was invited to speak at CSS Café, with a talk covering Scroll-Linked Animations with CSS @scroll-timeline. The meetup was organised using Zoom, and I think about 50-ish people attended (must say I wasn’t keeping track of that whilst speaking). # Slides You can find the slides embedded below: # Source Materials & Demos …

Scroll-Linked Animations with CSS Scroll-Timeline (CSS Conf Colombia)

I just finished giving a lightning talk at the wonderful CSS Conf Colombia covering Scroll-Linked Animations with CSS @scroll-timeline. Really enjoyed giving a talk again after all this time, especially with this great vibe they have going on and the afterparty in gather.town (skribbl FTW!). You can find the slides embedded below: Source materials for …

The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 1)

The “Scroll-linked Animations Specification” is an upcoming addition to CSS that defines a way for creating animations that are linked to a scroll offset of a scroll container. Let’s take a look at how it works and what results we can achieve with it.