Scroll-Driven Animations with CSS (2024.05.30 @ WebExpo)

View from the stage, a few minutes before I went up.

I’m currently in Prague (Czech Republic) where I’m attending WebExpo. Earlier today I gave a talk on Scroll-Driven Animations with CSS.


Table of Contents


# The Talk

The talk I gave is a full-length talk of 40 minutes.

A new addition to CSS is “Scroll-driven animations”. With it, you can link animations to the scroll offset of a scroll container using only CSS — no JavaScript needed! In this demo-heavy presentation, Bramus will dig into what this specification has to offer, dissect some of its demos (such as a working Cover Flow implementation), and cover common use-cases.

I have given a similar talk before, but this talk received a major overhaul for this occasion.


# Slides

The slides of my talk are up on are embedded below:


# Recording/Video

You can watch the recording of this talk on SlidesLive, or right here in the embed. You need to unlock the recording by entering an email address – any email address – before you can watch it.

The slides were captured individually (yay!) but unfortunately the transitions in between the slides were not recorded. A pity, as I often use animations – such as keyboard typing one – in my decks to make sure you are focused onto the right part of the slides.


# Thanks!

Thanks to the organizers for having me and thanks to the attendees for being there. It was an honor to speak to you at this BEAUTIFUL venue and to be part of the AMAZING line-up full of wonderful people (Ana, Cassie, Harry, Vitaly, Nishu, Nathan, Geri, Claire, Phil, Robin, Krasimir, …).

Some of the speakers (me including) at the afterparty. Selfie by Phil.

Also great I got to meet some of you IRL, after only having interacted with you online before (Ana, Cassie, Harry, Vitaly, and Vlad!)


💁‍♂️ 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

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.