View Transitions

[00:00:00]
>> Maximiliano Firtman: What's the next step that we, what's the next thing that we can add here? By the way, if you are following along, just in case, we are now in chapter three. We were using lazy load. Now we are chapter three, lesson three, adding view transitions. So, let's understand what's the idea.

[00:00:21]
So every time I'm going to the home, clicking the details, I don't see any transition and also, there is kind of a blink. Can you see that there is a blink that appears sometimes so everything goes white, so it doesn't look nice from an point of view. So, there is a way that we have today to enable view page transitions.

[00:00:49]
View page transitions, it's something that it appears, let me see, I do have a, let me go to, there is a link here, so I will open the link first. Here you have the documentation from the Chrome team that they were the first one implementing this. But again, this is coming to Safari as well.

[00:01:11]
Right now, it's in the beta, and it's called the build transition API. And the whole idea is that when you change pages or views or however you wanna call this, because, remember, in Vanilla JavaScript, there is nothing known as a page. But when we change the route, the page, a view, we can animate that change in a simple way without getting into CSS transitions, without touching the elements manually, okay?

[00:01:41]
So let's see how to do that. To enable transitions, you need to go to the router. The router.js inside services, is here the one that is changing the contents on the page in this particular vanilla JavaScript Project, okay? So, it's there where we're doing that. So we need to find a moment that is actually here, line 38 this is the one that is removing the current page from the DOM and adding the new page to the DOM, okay, can you see that?

[00:02:22]
So this is the the place where it's doing that. So it's removing the previous page and adding the new page. That's how that works. Well, here is the part where maybe we wanna do some change here. So the first thing that I'm going to do, are you gonna understand while a second, I'm going to wrap this code in a function.

[00:02:46]
So I will call this function changePage. Can I do a function inside the function in JavaScript? Can I create a function inside the function? Because this is a function inside the function inside an if actually. Can I do that? Yes, I know it's not common, and some people were thinking, wow what are you doing, but yeah that's perfectly fine.

[00:03:09]
It's a local function to the function, actually. If you don't like it, maybe you prefer this syntax. It's just the same. Maybe you like that syntax. It's just the same, okay? So pick the one you want. I did that because to enable transitions, this is how it works.

[00:03:28]
You say document.startViewTransition. You pass a function as an argument, and that function should make all the changes. So for example, I should call changePage function. Let me go back to this one. I think it's gonna be easier to understand. Okay, so why is that? So when you call startView transition, the browser is kind of taking a snapshot of the DOM and how the DOM looks like on the screen, okay?

[00:04:07]
It's taking a snapshot. Then you pass a function and you do all your changes. After your function finishes, the browser will take another snapshot. It in like an internal buffer, okay? Of the DOM and how it looks like and then it will make a visual transition, between the two snapshots.

[00:04:30]
Does it make sense? Yeah, the problem with this is that if the browser is not supporting a startView transition. Then our router is broken because this will give me an error it's not a function. So I should check if I do have or not have startView transition, so if I do have the API and this is known as progressive enhancement as a design pattern.

[00:05:00]
So if, if it's not there, is the API is not there, well, I will just call change space as it was before, without the animation. That's why I needed a function. So I can call it twice, if the API is there or if it's not there, okay, make sense?

[00:05:19]
So just with that change, I could try to see if something happens. So let me go back to my, let's close ToDo masters. Let me refresh my page.
>> Maximiliano Firtman: And now I will get into details I'm not sure if you recognize a difference. Do you see a difference?

[00:05:44]
From before, there is a crossfade transition that is automatically happening between the page change. It also works when you use the browser back and forward buttons, because that's how our router works, okay? So I think it's actually pretty cool that just by calling that function, you have this behavior.

[00:06:12]
Let's put it like this so we can see without the simulator, so it's better I don't see that blank moment because it's freezing the change the previous and the next part. Do you have any question at this point?
>> Student: Are there any polyfills available for that or is it not worth it?

[00:06:33]
>> Maximiliano Firtman: It can be polyfilled, to be honest I haven't searched for a polyfill. It can be polyfilled with- CSS animations, but probably the only thing that you can polyfill is something simple. Because now we will start adding something on the CSS side and the polyfill will get more complicated to actually parse that CSS content, to understand how to do the animation.

[00:06:59]
So it can be polyfill. So instead of calling, I mean, you could start here an animation using the Animations API, the normal Web Animations API. It's also possible, okay? But let's see how cool this is. Now I will go to CSS. And now we will write some CSS.

[00:07:17]
There is a new pseudo-element, so double column, view-transition-old, with a name and view-transition-new that will be applied to the old and the new pages. And we're going to start talking about root here. You will explain what this is in a sec but actually root means the whole animation, the default animation.

[00:07:46]
So I can do something and actually I'm going to probably define one property for both selectors and I can define the animation duration. I can change animation properties, for example, I can save 4 seconds. So now, if I refresh, you can even see the first load, of course four seconds, it takes too much, right?

[00:08:09]
But now I can click there and I can see the animation slowly fading in four seconds every time you make a change there. So, I mean, it's okay, it's not so bad. Yeah, maybe five seconds is not good, okay? But you can play with different values until you're happy.

[00:08:29]
Typically, it's less than half a second. But take a look at this part, okay? Pay attention to that part. Can you see that? The logo is moving sometimes, which makes a weird effect. So we will solve that later, okay? But before that, let me tell you that you can customize the animation.

[00:08:51]
So by default, it's a crossfade, so one goes out, the other one goes in, okay? That's the default between the two snapshots. But I can customize that, and I already have one here that actually was created by the Chrome team, so it's not my let's go to adding view transitions this one.

[00:09:12]
So I'm just going to copy and paste this doesn't worth the time to write this from scratch. Okay, so a lot of web animation things here going on. So I'm going to paste this here. So now this is creating a keyframe based animation. This is web animations in CSS, and then applying different animation from the old one and from the new one.

[00:09:33]
So it's changing what happens with the old one and what happened with the new one, okay? so, just by applying CSS here with the not changing JavaScript, let's see what happens now. So, now I have an animation that is similar to apps. It's kind of moving around when you change pages, but we do have a problem.

[00:09:58]
The header is also moving. Can you see that? And it doesn't look nice, right? So it should, I mean, the header should stay there. Can we do that? Yes, we can. With this API, we can create animation groups, or actually build transition groups. That's a real name, to do that, we can do that from JavaScript or from CSS, but I can do it from CSS.

[00:10:25]
I can just point to that header but in my CSS, we can get it with the header that is an immediate descendant of the body. That's actually the HTML element, if we inspect here, it's the header inside the body, okay? Is that one? To actually separate that one from the animation group, we need to change the view transition name.

[00:10:55]
And we put any name like main header or heather any string will work without spaces. Any identifier should be a valid CSS identifier. If I do that, if I refresh now. It gives me a 404 because I'm in a URL. Let's go to Home. Now you can see that we are not seeing that animation to the head.

[00:11:22]
We are still having some thing, because sometimes appear as a scroll bar, sometimes we have a scroll bar. Sometimes we don't have a scroll bar, so that's why it's kind of moving a little bit, but it won't happen, probably on the mobile device. But anyway, I'm not seeing that animation anymore.

[00:11:39]
With that name, now if I want to, I can even change instead of root, I can use this ID here, so I can change the animation. Remember, I can say 0, or it can be faster or slower, and I can change the type of animation. So I can animate elements with different animations.

[00:12:03]
It can get really complex, as you can understand, probably right? So, now it's getting better. There are still not in our final step. I think you will like the final step anyway. You can see that when you are doing single page applications. When you apply this design pattern, it gets a better user experience, okay?

[00:12:24]
Much better user experience.