View Transitions

[00:00:00]
>> Maximiliano Firtman: Now every time we are changing URLs, we know it's working, but the change happens immediately. And maybe we can do a nice transition, a nice animation between pages. And initially you are thinking, this is probably too complicated. I know we need to get into CSS animations or no fade in with a set timeout and well, actually no today, there are a better way to do that is known as the view transitions API.

[00:00:35]
It's actually pretty simple, at least for the basic usage, so let's try to use it. I will go to my router, so I will do a change in the router, okay. So in the router, when we are here, defining the page element, I'm going to do something new.

[00:00:56]
I'm talking about here, okay. So these two lines are actually inserting the new page, okay, in the UI. So those two lines are doing that. So I'm going to do this, I'm gonna save the old page, so the old page. Page is query selector, Main, first element child, Because remember, the main has an element inside that's the current page.

[00:01:36]
If I do have an old page, why is the possibility of not having an outpatient? Because when you load the page, there is nothing in the main, okay, so it's empty. So if I do have one, I'm going to talk to that old page, and I'm going to set a CSS style that is called view transition name.

[00:02:01]
I'm going to set any name for example, old, okay, and for the new one, I will say style, view transition name, new. Then we have the old, we have the new, okay. So how does this work? So to make the change, we need to make the change in one particular function.

[00:02:27]
So we need to call one function that is, document, start, view, transition, okay. And then I need to pass an argument, a function one, and I should put this code inside. Okay, I'm going to refactor this a couple of times, so this goes here. So this is what's going on, when we call a start view transition the browser is kind of taking a screenshot of the current user interface.

[00:03:01]
Then you make a change and with that change, it's also taking a screenshot and it's animating the transition. Something like that, okay, does it make sense? I'm not done yet, but if I'm trying this, refreshing I go to movies. I'm not sure if you see there is a slight difference mostly, when you are doing this.

[00:03:27]
Can you see there is a fade now, and it's subtle, but you could see some small changes in the mostly, if it's already loaded, okay. You can see that here there is an animation. And of course you can, using CSS, you can customize that. Even you can make things going out and the other one going in so you can make a slight transition and many other things.

[00:03:57]
To finish this code, we may have a problem, is that build transitions might not be available on every browser. They are in Safari, they are in chrome, the latest versions. They are on the latest of versions of Firefox. But there still, if we go to, can I use, There are still a couple of browsers where, it's still not there.

[00:04:21]
So we are at 84 I mean, it's good, but the problem is that if the browser is not supporting build transitions, it will never execute these two lines. So we should check if we have. So if we don't have document start view transition, so if it exists or if it doesn't exist, it doesn't matter, we do something and if not, we do something else.

[00:04:51]
So in this case, we do a transition, and in this case, we don't do a transition. So actually what I'm going to do is these two lines will actually go to a local function, update page. I'm going to call, if there is no transition, I will call update page immediately.

[00:05:15]
And if we do have transitions inside, start the transition. Okay, does it make sense? And that's how you can quickly create a transition between two pages. So where does that come from? That's looks like that's using CSS, but it's that's, it's in the browser API. It's a browser API that belongs, it's a CSS spec page transition, but it also involves a JavaScript API, so it's both it's come from.

[00:05:48]
It's not a library, it's a browser spec, so here, can I use? You can go here and you can see the spec, okay. But have a link on the spec, but not on this one. And here you can see that five four has some issues. You need to enable the flag, but I mean, it's still good enough to use it if it's available and if it's not available, there are still a lot of users that will not execute that.

[00:06:15]
So that's why we need a fallback, okay. And will create animated transitions between different DOM states. Everything you change there, and you can make it even more complicated. And also, we have now a cross document view transition where you can do a transition between two different page loads.

[00:06:34]
So server side, render page loads, okay. So this one is for single page applications, and this one is for multipage application. And I'm assuming you can make a different transition if you wanted to do something unique you could do that. Yeah, I mean, if you look for the view transitions API, there is a web dot dev article.

[00:06:58]
With some examples of what you can do, things like that, that's pretty cool. In that case, you need to define some properties, like, I wanna animate that particular image, and I want that particular image to become that other image, and then you will make the transition for you.

[00:07:14]
So there are lots of things that you can do, okay, here I have more examples. And for you don't need JavaScript for that. You just need to find some properties in CSS, okay, and voila. This is for several documents, so it's doing that animation, even loading different HTMLs from the server.

[00:07:38]
So it's this is bringing kind of native app transitions for web apps.