Back in October I was at Full Stack Europe in Antwerp. One of the talks I gave covered how I recreated Cover Flow using only HTML and CSS, thanks to Scroll-Driven Animations.
~
💡 The feature covered in this post is formerly known as Scroll-Linked Animations, before it got renamed to Scroll-Driven Animations in December 2022. While this post uses this new name, the slides and recording do not as they predate the rename.
~
# The Talk
The talk I gave is a lighting talk of about 5 minutes introducing Scroll-Driven Animations. The talk revolves around a central Cover Flow demo implemented using only HTML and CSS. On the CSS side, it uses Scroll-Snapping, CSS Animations, and Scroll-Driven Animations. The recording is embedded below:
💁♂️ If you want to know more about Scroll-Driven Animations – this talk only touched the surface of what’s possible – be sure to check out this episode of HTTP203.
~
# Slides
The slides of my talk are up on slidr.io are embedded below:
~
# Demo
The demo used for this talk is available on CodePen. Although Scroll-Driven Animations are not supported (unflagged) in any browser at the time of writing, the demo above works thanks to a polyfill that’s being loaded.
See the Pen ✅ Scroll-Linked Animations: Coverflow (CSS view-timeline 2022 Version) by Bramus (@bramus) on CodePen.
~
# Thanks!
Thanks go out to organizers Dries, Freek, and Rias for having me again. Just like the previous edition in 2019, the conference was of high quality again. Having a history in PHP and Cloud, I really liked the set of talks they selected for the conference.
Hopefully you all had fun attending my talk — I know I had making it (and whilst bringing it forward) — and perhaps you even learned something from it along the way 🙂
~
💁♂️ If you are a conference or meetup organiser, don't hesitate to contact me to come speak at your event.
How can I run this project on VSCODE? It is not working as expected.