🚨 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.
Not covered in the episode – as it wasn’t ready back when it was recorded – is that Chrome 108 has experimental support for CSS
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.
What if I told you this demo right here is powered by nothing but HTML and CSS?
— Bramus (@bramus) October 4, 2022
Here’s links to all demos (and more) shown in the episode, all hosted on CodePen:
- Cover Flow Demo (CSS) → https://goo.gle/3SvEQbd
- Cover Flow Demo (JS+WAAPI) → https://goo.gle/3F9S62h
- Scroll Progress Demo (CSS) → https://goo.gle/3F9S6zj
- Scroll Progress Demo (JS+WAAPI) → https://goo.gle/3Sq5nXn
- Image Reveal on Enter Demo (CSS) → https://goo.gle/3F9S8XX
- Image Reveal on Enter Demo (JS+WAAPI) → https://goo.gle/3Sto8JK
- List fly-in + fly-out Effect Demo (CSS) → https://goo.gle/3Svg3UE
- List fly-in + fly-out Effect Demo (JS+WAAPI) → https://goo.gle/3F9Saix
- Horizontal Scroll Section Demo (CSS) → https://goo.gle/3SpaDe5
- Horizontal Scroll Section Demo (JS+WAAPI) → https://goo.gle/3SAbcBz
- Parallax Cover to Sticky Header, faked (JS+WAAPI) → https://goo.gle/3SKoMCR
- Stacking Cards Demo (JS+WAAPI) → https://goo.gle/3VW0wjD
I’ve also bundled all demos into two CodePen collections:
- Collection with all CSS Demos → https://goo.gle/3F9ScqF
- Collection with all JS+WAAPI Demos → https://goo.gle/3F9ScXH