Scroll-Driven Animations with CSS (2024.05.30 @ WebExpo)

~

Table of Contents

• The Talk
• Slides
• Recording/Video
• Thanks!

~

# 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 slidr.io 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, …).

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

~