Scroll-Driven Animations and View Transitions (2023.06.09 @ CSS Day)

Bramus at CSS Day 2023
Bramus at CSS Day 2023

Back in June I was at CSS Day in Amsterdam, Holland. While at the conference I gave a talk on Scroll-Driven Animations and View Transitions, two of the topics I am concerned with in my role as a Chrome DevRel Engineer at Google. In this post you can find some backstory, the slides, a recording, etc.


# About the Talk

This June I was in Amsterdam at my favorite conference: CSS Day. The initial plan was to attend the pre-conf meetup, staff the booths we had on site, and for the main part simply sit back and enjoy the talks.

However, a few weeks before the event my then colleague Jake Archibald had decided to leave Google, upon which the assigned speaking slot became available. A few DMs back and forth with the organizers, and I was set up to take over Jake’s slot.

Jake still made it on stage, somehow 😉

Jake had planned to deliver a talk on View Transitions. Even though I was entirely busy with Scroll-Driven Animations at the time, I did not want to let the crowd down by talking about a subject they had not signed up for, so I decided to talk about View Transitions as well. After all, I am taking over the DevRel work from Jake on it, so it would have been a very good jumpstart.

But, I also really wanted to talk about Scroll-Driven Animations, a topic I’ve been working on for the past year (and more). With Chrome 115 shipping around that time it was just the perfect moment to talk about it.

Not wanting to make a choice on which topic to talk about, I decided to cover the two – both View Transitions and Scroll-Driven Animations – in one and the same talk. I knew this merger could work, as I had already done so earlier this year in my Google I/O talk What’s new in Web Animations, albeit only superficially.

It is important for a user interface to feel polished and fluid. A great way to help with that are appropriate animations and transitions. They help users build an accurate mental model of how the interface works, thereby increasing the overall usability.

In this talk, you’ll learn how you can use View Transitions and Scroll-Driven Animations to achieve exactly that.

The difficult part in merging these two topics into one single talk was the timing of it all. At the time I was still elbow deep into preparing the launch of and following up on its implementation progress, while also needing to get myself more familiar with View Transitions than I already was. And oh, I also had to create the slides themselves, and try to fit it all in 50 minutes even though both topics deserve their own full talking slot.

The weeks before CSS Day I spent a lot of time tinkering with View Transitions getting to know its ins-and-outs, which often led to me burning the midnight oil. Once in Amsterdam (on Tuesday) I had the story I wanted to tell ready in my mind, but didn’t have any slides yet and still needed to finalize some of the demos. To get that all done in time, I didn’t go to all of the social events before the conference but instead pulled back into my hotel room to work. On Thursday evening, just before midnight, I got all slides locked in place … but they still showed placeholder images instead of screen recordings for most of the demos. I scheduled to record these on Friday, which unfortunately meant I had to skip out on some of the other talks that (Sorry, fellow speakers! 😬). In the end, all hard work eventually got the job done: at 3.15 PM on Friday my slides were officially ready, with still 1 hour to go before I had to go on stage.

O yeah, this talk has code … a lot of it.

One thing I didn’t manage to get right was the timing. Just like the other speakers I was assigned a 50 minute slot, and I knew it was gonna be very tight to fit it in. Turns out PPK had forgotten to put on the timer during my talk … which played in my benefit as I ended up speaking for 57 minutes (without Q&A).


# Slides

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


# Video

The slides themselves might not tell you much, but thankfully the talk was recorded and has been published on YouTube. The video is embedded below:

One thing that I need to correct in this recording is that I kept on saying “screenshot”, while I should actually be saying “snapshot” instead. While the old snapshot indeed is a static screenshot of the captured elements, the new snapshot is not: it is a live, albeit still flattened, representation – so it’s more than just a screenshot. Also see this Twitter thread for some more info on this.

And yes, that is me wearing flip-flops and a bright orange pair of swimming trunks with a hotpink pineapples print on it. It was really hot that week, with temperatures over 30°C, so I slipped into something more fitting for the weather. It started out as a joke, but eventually ended up becoming reality.

🩳 Story Time: I actually bought those swimming shorts while at CSS Day 5 years ago. After the last day of the conference I had a dive training scheduled back at home. The plan was to drive back to Belgium immediately after the conference, and go straight to the swimming pool.

While at the conference I realized I had forgotten to bring my swimming trunks with me. So in between talks I went to the nearest clothing shop to buy a pair and this was the only model they had on display. It would not have been my first choice, but since I was limited on time I went for it. And to be honest, I don’t actually regret buying them … they have served me well over the years 🙂


# Resources

To read up on the subjects covered, please check out some of the resources we have up on or elsewhere:

The slide deck is also packed with links, linking out to the relevant articles, demos, etc. You can find these links at the bottom of each slide, if applicable.


# Epilogue

I want to thank organizers Krijn and PPK for once again putting their trust in me by asking me to speak at CSS Day. It was an honor to be part of what was once again an excellent conference.

While in Amsterdam, some other colleagues also were at the event. Not only did I get to spend time with my teammates Una and Adam, I also got to spend time with some of the DevTools folks and the Blink Style Team. As a full-time remote employee, I get a lot of energy from rare moments like these.

The Google Chrome delegation at CSS Day 2023
The Google Chrome delegation at CSS Day 2023

Me in the office, debugging something together with Adam. That day we also worked with Rune from the Style Team (pictured) and Una (who took this photo)

Q&A session with the Blink Style Team in between talks

I also got to meet a lot of folks who I only interact with through Twitter and/or know from the CSS WG. Meeting them in person really helps to solidify the interpersonal connections, which I am grateful for.

Me, Roma(n), Yehohnathan, and Anders

Until next year, CSS Day and friends!


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