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 * Slides * Recording/Video * Thanks!
~
The TalkThe 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.
https://www.bram.us/wordpress/wp-content/uploads/2024/04/scroll-driven-view-transitions-001-050p.mp4Recording 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.
~
SlidesThe 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/VideoThe 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.