Scroll-Driven Animations: Cover Flow (2022.10.06 @ Full Stack Europe)

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 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.

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 …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

1 Comment

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.