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

~

# 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 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 scroll-driven-animations.style 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.

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 slidr.io 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.

~

# Resources

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

• Smooth and simple transitions with the View Transitions API
• Animate elements on scroll with Scroll-driven animations
• scroll-driven-animations.style

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.

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.

Until next year, CSS Day and friends!

~