Scroll-Linked Animations with ScrollTimeline and ViewTimeline

In the latest episode of HTTP 203 I share my excitement with Jake about Scroll-Linked Animations with ScrollTimeline and ViewTimeline, a feature I’ve been tracking for almost two years now.

A lot has changed since I first wrote about it, as the specification has undergone a major rewrite. This episode should get you up to speed with everything:

Not covered in the episode – as it wasn’t ready back when it was recorded – is that Chrome 108 has experimental support for CSS scroll-timeline and view-timeline! It’s only a partial implementation at the time of writing, but nonetheless this is already very – VERY! – exciting news. The Firefox folks are also working on it.

~

The demo I’m still the most proud of, is this Cover Flow recreation using only HTML and CSS. I recently also gave a lightning talk about it at Full Stack Europe.

~

Here’s links to all demos (and more) shown in the episode, all hosted on CodePen:

I’ve also bundled all demos into two CodePen collections:

~

🔥 Like what you see? Want to stay in the loop? Here's how:

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.

This site uses Akismet to reduce spam. Learn how your comment data is processed.