This content originally appeared on Bram.us and was authored by Bramus!
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:
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2022-10-27T18:42:39+00:00) Scroll-Linked Animations with ScrollTimeline and ViewTimeline. Retrieved from https://www.scien.cx/2022/10/27/scroll-linked-animations-with-scrolltimeline-and-viewtimeline/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.