Reality Check: The Limits of View Transitions

Ever wondered how to animate between two UI states without wrangling heaps of extra code? Well, get ready to unlock a new level of web development capabilities with us, as we dive into the exciting world of view transitions.

Highlights
00:00 Introduction
00:44 Understanding View Transitions
02:05 Demos & Practical Applications
03:14 Current Reality vs. The Dream
06:47 Potential Use Cases & WordPress Context
07:25 View Transitions With HTMX
08:31 Working With View Transitions in CSS
12:54 Conclusion

Links
- Chrome Developers Article: https://developer.chrome.com/docs/web-platform/view-transitions/
- Astro 3.0 View Transitions: https://astro.build/blog/astro-3/#astro-view-transitions
- Svelte View Transitions: https://svelte.dev/blog/view-transitions
- HTMX View Transitions: https://htmx.org/docs/#view-transitions
- View Transitions API Overview: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
- Maxi Ferrera's Demo: https://live-transitions.pages.dev/
- Turbo: https://turbo.hotwired.dev/
- swup: https://swup.js.org/
- Shuffle.js: https://vestride.github.io/Shuffle/

Steffen: 0:00

We are recording in a new setup and we've got a new topic. We're talking about view transitions.

Dominik: 0:08

Oh the hottest out there, yeah, yeah. So with the release of Astro 3.0 and like also swelled adopting it and some other libraries that can support it out of the box now, like HTMX, for example, view transitions or the view transition API actually got a gained a lot of momentum over the last couple of months and is now at a point where, although only implemented in Chrome based or Chromium based browsers so far right. It's a really interesting technology that hopefully will be implemented in every browser soon.

Steffen: 0:42

So yeah, what is it? What is it? Yeah, let's have a look at what it can do and what it does. Do you want to share it?

Dominik: 0:49

Sure, yeah. So here this is like the basic article on view transitions. I mean, it was implemented by Chromium first, or by the Chrome browser, and here you can see what it is like. It gives you basically a way to animate between two browser states without a lot of like extra right. In theory, there are two different specs from that. There's like a client side, like JavaScript API, and there is like a document based approach. But this is actually not implemented yet Stably. It's only behind an experimental flag.

Dominik: 1:21

So we will focus on like the JavaScript side of things. Right, and basically what it is is that you have just a single function that you can call start view transition, and in there you manipulate the DOM in a way and the browser will take a screenshot of so it's called screenshot. It's not a real screenshot. It has like more information to it. It's like a DOM screenshot, kind of a DOM shot, and it will then transition between the screenshot that was taken before this started like this function, and then when it's done. Thus it gives you like really a lot of power. By default it will just fade, but it can like do any animation and even like morph elements into each other, even though they are like completely different elements, right.

Dominik: 2:04

So this is like from a technical point of view, this is like a good introduction, and there are some awesome demos made by Maxi Ferrera I hope I pronounced it correctly, his name where you can see let's refresh this that even transitions between pages will keep the state of like JavaScript elements or like interactive elements, in this case, a video player that just keeps playing while it does the transition, and yeah, this is like super awesome.

Dominik: 2:32

There's another demo from him, like this movie movies app, where you can see that, like, all of this is like a really nice, like animation. And the nice thing about this you don't have to write a lot of JavaScript for that. You just say here the changes are made to the DOM, now animate, right. And then you can say if you want, for example, an element to morph or to have like a more custom animation, you give it a name, you give it a view transition name via CSS. So either in a style attribute or via a style sheet, where you then can say OK, if you find this element with the same transition name on the first screenshot and the second screenshot, just like move it or like morph it or do your magic there.

Steffen: 3:12

Yeah, that's pretty awesome, and I think what is so amazing about it, what you don't really see here yet is, like what's happening is you are, or it's automatically animating going from one URL to another URL, right, this looks like a seamless single page application like animation, but it's it's just not.

Steffen: 3:34

It's like what's actually happening is the browser is going to a new URL, but it's automatically transitioning that state between those, and this used to be kind of the biggest pain in creating these nice page transitions. Right, if you want to have nice page transitions, there were only two options Either you would kind of fade out and animate out the page and then move to the new page and then fire up an animation in, but this would never be smooth, right, because you would still have that change between. Or you would need to create or make your website an actual single page application, which is kind of terrible for a classical website that's also supposed to be crawlable and so on, and also from where websites are coming from in terms of CMSs and then statically server generated code and so on. Yeah, so, yeah, this is opening up so many new use cases kind of, and like really level up their experience.

Dominik: 4:27

What you are basically talking about is really having an MPA what it's called nowadays like a multi-page application, and then saying, okay, I want to animate from between these two, statically rendered on the server, statically rendered aside and this is still experimental right At the moment. If you want to use that, the URL changes will actually be push state changes, so you will need a client side router or something like that inside of your app in order to make use of that, that the URL changes right?

Steffen: 4:59

Oh, that's not. That's not in the spec yet. That's the experimental thing that we just talked about lately. Oh, good Thanks for explaining that.

Dominik: 5:08

So there's like this WICG spec about view transitions. One part is the cross document view transitions. It is implemented behind an experimental flag in the latest Chrome browsers, but they are also, I think, still a couple of caveats, especially with like the playing elements and so on. So I don't think that there are really solutions for that in Astro. However, like Astro is like an MPA framework that renders like single pages usually, but their view transitions is based also on a client side router, so they actually do the logic of updating the URLs and it's like really easy to get going to make the transition. So if you, however, want this for a WordPress website, you will still need to use like an extra library, for example, like TurboLynx right or Swap, which is like another JavaScript library that does like the whole page replacement. But now with the view transitions API, you can easily have like these animations and easily have like a better, smoother experience and probably these libraries can become a lot smaller.

Steffen: 6:14

So, basically, everything I said or not everything, but mostly like it's this is still the dream. This is not what view transitions are now. Forget all about that, but still, then, please believe in me in the dream. Yes, okay, so you still. You kind of create a multi-page app, but like you'd have to do the DOM replacements yourself, it does transition automatically, but it's not an actual URL change.

Dominik: 6:38

But there is a dream, now right.

Steffen: 6:40

There's a dream, there's a dream, and there's a dream, that one day we can actually use this in a multi-page app.

Dominik: 6:46

But anyways, this API. It empowers you to do so many cool things and also it doesn't need to be fully page transitions, but just like in WordPress context, for example, like what, what I think is really awesome, like if you have a post list with a filter, for example, then you usually do like the updating via Ajax somehow, right, or whenever you change a filter, or maybe even the pagination is done via Ajax and these things can now be easily animated. Like where you say, okay, the cards need to fade in, even the position of the cards can change. It's like an automatic shuffling of the cards, of the items. So this is like super cool yeah.

Steffen: 7:24

And now we talked also recently about HTMLX. And if you combine these two, especially for this post archive filter thing, right, you, you build a static version of that with static filters that all work, and then you can just add with some HTML attributes, htmlx, like the interactivity, so the DOM gets automatically replaced, and then on top add view transitions and everything is kind of an interactive already, right, yes, totally.

Dominik: 7:52

And there's even a HTMLX, was, I think, one of the first frameworks, libraries that supported view transition, even though experimental, of course, only in the browsers that use it. But here you actually know, you just have to wrap the replacing of the HTML inside of a function call, the start documents, start view transition. And this is also something when you develop it you need to pay attention to, because this function call is like render blocking kind of, so you shouldn't do data fetching or anything inside of the start view transition callback, but you do all of that first and then just replacing the DOM, just like manipulating the DOM, should be done inside of that function.

Steffen: 8:30

Okay, can we look at the CSS where you define the elements, kind of right.

Dominik: 8:37

So, first of all, like you have like these general CSS selectors these are always like these pseudo element selectors for view transition old and view transition new and then in the brackets you have like the element, in this case the root. So here you would globally change the animation to have like a duration of five seconds. It's like for debugging. It's maybe quite nice to actually see what's happening, right. But you can also use web animations like these keyframe animations and CSS.

Dominik: 9:01

And then let's see here this is what I was talking about before so it's just the CSS attribute, the view transition name, and then you give it a name and this must be unique on like the previous and the next, like screenshot kind of what you transition to, and then you can actually hear, you see, like the structure of it. This is how you target these things with CSS. So you have the view transition group of like main header in there, or you have like the pseudo element, view transition old main header and new main header, and you can also then say okay if there is a new one but no old one. So that means when a image comes in or when an element comes in, if there's an old one and a new one. That's like when it disappears, or if there is an old one and a new one, then it just moves the position right.

Steffen: 9:47

So with this kind of, you define the source element, the origin and the target, kind of like on those two. I'm still thinking about pages kind of, because that's kind of what you're doing, but like because the header on, especially when you're moving from, let's say, an archive page to a single page in your layout, then what's the header on a single page would not be the header element on the archive page, right, but with these definitions kind of in CSS, you can mark that up in CSS so it knows what element will become what element in the other layout.

Dominik: 10:21

Exactly. You can, for example, also say, like you always have a hero element, right, and this hero should more of its con, like it should just more from one page to the next, but then if you have like a post where in an archive page you have a preview image or like a featured image and then you click on it and you want this to actually persist, you just give it a name as well, like post, for example, post image minus, and then the post ID or something like that, and then you have the same in on the post detail page, right. However, it's like at the moment, there are like no wild card selectors or anything, right, so they want to change this, but you couldn't, for example, if you had post 12 minus image, right, you really have to specify the selector and you cannot do post dash, star dash image or something like that. But this is something they want to introduce, I think, and they are working on I like that, yeah, and it's really nice because, although it's, it's not called page transitions or shared elements transitions anymore, but it's like view transitions API, right.

Dominik: 11:19

So it's not like you should not think of it that you are limited to page transitions, because I think especially this, these little animations that you have when when you update something on the page, that this is something where this is really powerful, because, for example, we have used in the past libraries to do that, like shuffle JS or I don't know that just animate cards from coming in. Or you always had to like keep the existing DOM somewhere, the existing elements in the DOM, and then add the new ones and then now see how they can be replaced and so on and animate it. And now you just say, okay, I'll get rid of the old elements, add the new elements and let the browser figure out how the animation should be done. And this is like really super cool.

Steffen: 12:03

But I think this probably also comes from the development of state handling frameworks and so on right, where this is how it works anyways. Like that, you have rather have two states and state gets re rendered and when something changes and this kind of fills the gap, whereas when you needed to build everything yourself, yeah, you would rather keep the DOM and the elements and try to move them and transition them, but yeah, this can get really messy because you're not on top of the state, kind of.

Dominik: 12:31

I actually think this was something that was really difficult to implement for most of the, for most of the framework, because then you have like these transition groups and you have like weird things that you need to take care, and now, if you have like a unified API, at least you know where it's going like you can build upon that and make use of that. So that's really, really cool.

Steffen: 12:53

Great, let's wrap it up here.

Dominik: 12:56

Yeah, so make use of view transitions. It's basically also progressive enhancement, right? So users will not really lack something, just a little bit of animations. When they are not supported by your browser, you can use that in production. It's live in the latest Chrome browsers and, yeah, save yourself a lot of headaches and a lot of JavaScript.

Steffen: 13:18

Yep Good.

Siegfried, deploy!

Reality Check: The Limits of View Transitions

Listen to this podcast on