💡 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.
The slides of my talk are up on slidr.io are embedded below:
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.
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.