If View Transitions and Scroll-Driven Animations had a baby … (2024.04.25 @ CSS Café)

On April 25, 2024 I gave a talk at CSS Café (event link) on how I combined two of my favorite web features and built a “Scroll-Driven View Transition”.


Table of Contents


# The Talk

The talk I gave is titled “If View Transitions and Scroll-Driven Animations had a baby …”

With View Transitions, you can create immersive native-like experiences that have smooth and seamless transitions between views of your website. With Scroll-Driven Animations you can drive animations by the act of scrolling. What if you wanted to combine both to create a “Scroll-Driven View Transition”? Could that ever work? And if so, how does it work?

The talk is essentially a slide-ified version of this thread on Twitter / Mastodon which revolves around the following demo.

Recording of the built demo.
It features a View Transition that is controlled by the act of scrolling.

You might recognize the UI here, as it’s a follow-up to the View Transitions poster-child demo by Maxi Ferreira.

The talk doesn’t just dissect the demo, but also teaches you Same-Document View Transitions (referencing Maxi’s demo) and Scroll-Driven Animations + its ranges. I also teased my upcoming video course on Scroll-Driven Animations along with that.


# Slides

The slides of my talk are available on slidr.io and are also embedded below:

Because this talk is animation heavy and the online slides don’t support animations or video, you’re most likely better off watching the recording.


# Recording/Video

The talk was recorded. You can watch the video on YouTube or right here:

If you’re already familiar with the ins and outs of View Transitions, you can skip to the 27:30 mark of the video.


# Thanks!

Thanks to organizers Schepp and Nils for having me for the third time at CSS Café. Thanks to all attendees for following along and asking some nice questions afterwards during the Q&A.

It was also great to see many new faces and also to see some of you who I had, up until then, only interacted with through chat for the first time.


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