π¨ 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.
What if I told you this demo right here is powered by nothing but HTML and CSS?
Yep thatβs right, not a single line of JavaScript (*) in sight! π€©
Demo on @CodePen: https://t.co/WRiCSNlyhe
(*) Except for a polyfill thatβs being loaded https://t.co/ROU6sWmKUW pic.twitter.com/iY391KgBa8
— 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
~
π₯ Like what you see? Want to stay in the loop? Here's how:
I can also be found on π Twitter and π Mastodon but only post there sporadically.