Scroll-Linked Animations with ScrollTimeline and ViewTimeline

🚨 UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite. The contents of this video are mostly correct, yet some minor things have changed.

Please refer to https://developer.chrome.com/articles/scroll-driven-animations/ for an article and examples that use the latest version of the syntax.

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:

~

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. Required fields are marked *

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