Scroll-Driven Animations with CSS (2024.05.30 @ WebExpo)

Slides + Recording of the talk “Scroll-Driven Animations with CSS” I gave at WebExpo


This content originally appeared on Bram.us and was authored by Bramus!

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

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.


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate Updates
APA

Bramus! | Sciencx (2024-05-30T21:36:09+00:00) Scroll-Driven Animations with CSS (2024.05.30 @ WebExpo). Retrieved from https://www.scien.cx/2024/05/30/scroll-driven-animations-with-css-2024-05-30-webexpo/

MLA
" » Scroll-Driven Animations with CSS (2024.05.30 @ WebExpo)." Bramus! | Sciencx - Thursday May 30, 2024, https://www.scien.cx/2024/05/30/scroll-driven-animations-with-css-2024-05-30-webexpo/
HARVARD
Bramus! | Sciencx Thursday May 30, 2024 » Scroll-Driven Animations with CSS (2024.05.30 @ WebExpo)., viewed ,<https://www.scien.cx/2024/05/30/scroll-driven-animations-with-css-2024-05-30-webexpo/>
VANCOUVER
Bramus! | Sciencx - » Scroll-Driven Animations with CSS (2024.05.30 @ WebExpo). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/05/30/scroll-driven-animations-with-css-2024-05-30-webexpo/
CHICAGO
" » Scroll-Driven Animations with CSS (2024.05.30 @ WebExpo)." Bramus! | Sciencx - Accessed . https://www.scien.cx/2024/05/30/scroll-driven-animations-with-css-2024-05-30-webexpo/
IEEE
" » Scroll-Driven Animations with CSS (2024.05.30 @ WebExpo)." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2024/05/30/scroll-driven-animations-with-css-2024-05-30-webexpo/. [Accessed: ]
rf:citation
» Scroll-Driven Animations with CSS (2024.05.30 @ WebExpo) | Bramus! | Sciencx | https://www.scien.cx/2024/05/30/scroll-driven-animations-with-css-2024-05-30-webexpo/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts