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

~

Table of Contents

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

~

# 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.

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.

~