In this lesson, we're going to take a look at the very cool CSS view transitions and how they allow us to, well transition between pages of views. All right, I've got a pretty elaborate example here, uh, which consists of multiple pages. So you can see page one and then page two looks like it's been punched in the face. And I'll show you why in a minute. And then on page three we have a bunch

And I'll show you why in a minute. And then on page three we have a bunch of blog posts which come from the database. And then we can see the individual post itself in our view transition CSS file. There's actually quite a bit of styles already, but none of this at all is relevant to animations. It just sets us up with some basic styles and then we are going to be able to illustrate what animations can do thanks to these starting points.

and then we are going to be able to illustrate what animations can do thanks to these starting points. So view transitions have a CSS component, but there's also a JavaScript View Transitions API. In this lesson, we're going to focus on the CSS part, but later in the course we are going to cover the JavaScript as well. Just to be extra clear, the pages I've showed you in the demo are individual routes. You can see this is just blades templates.

the pages I've showed you in the demo are individual routes. You can see this is just blades templates. We have the page one, page two, the page three, which has a bunch of posts, and then the individual post page. So whenever we navigate between page one, two, and three, we are effectively having full page refreshes. This is a multi-page application. You can see at the bottom that each page has its own URL view transitions two view transitions three

You can see at the bottom that each page has its own URL view transitions two view transitions three and just view transitions. And notice that whenever we change pages, uh, everything is abrupt. It's a brand new page. Uh, sort of normal, right? Well check this out. We are going to add one line of CSS. We can do this anywhere. Let's do it right at the top. I will have an AT rule at view transition, and I would set this to navigation auto,

I will have an AT rule at view transition, and I would set this to navigation auto, and that's the only thing that I will do. Okay, so let's try to navigate to another page again. And did you see that it looks like the pages have sort of this cross fade effect where almost like two pictures that blend inside another and well, that's exactly what's happening. The browser is going to take a snapshot of the old and the new page and then cross fade between the two.

The browser is going to take a snapshot of the old and the new page and then cross fade between the two. If I open the dev tools, I want you to focus above the head tag here. When I navigate between the pages, did you see that view transition? Okay, it's arguably happening a little bit too fast to notice what's happening. So let's go and slow down this transition. So by enabling the view transition navigation,

So let's go and slow down this transition. So by enabling the view transition navigation, we have enabled what's called a view transition group. And there can be multiple groups. And here we want to target all of them. So I can use this star selector. And here we can use any of the animation properties that you've learned about. So let's make the animation duration slower. Let's make it obnoxiously slow. So 10 seconds.

So let's make the animation duration slower. Let's make it obnoxiously slow. So 10 seconds. And so now I'm going to trigger a page navigation, and you can see the fade in, fade out starting to happen. And here we have this view transition, uh, with the view transition group, which is the root group. Let's juggle it one more time and go inspect this while we have time. And you can see there's a view transition old and new. So check this out. I'm going to define some key frames.

And you can see there's a view transition old and new. So check this out. I'm going to define some key frames. Key frames, let's call it slides down. And I don't want to use the from but the two step. And I want to translate by 100 viewport height, and then I'll make another at key frames. Uh, drop from above. Let's see if copilot can work it out. And yes, it can. For this one, we want the elements to drop from the top of the viewport. So have it start at a hundred viewport

to drop from the top of the viewport. So have it start at a hundred viewport heights above where it is. And then check this out. I'm going to target the view transition old and view transition new pseudo selectors and apply these key frame animations to them. View transition old. And let's go animation. We want this one to slide down over one second. That should be enough. And then we will do the

We want this one to slide down over one second. That should be enough. And then we will do the opposite or the new page. We will drop from above over one second. Alright, but if you remember the view transition, old and new had a route, so let's make sure we pass that. And I also want to get rid of these 10 seconds animation duration, otherwise these animations would run over one second, but then the page would remain sort of blocked

otherwise these animations would run over one second, but then the page would remain sort of blocked for another nine seconds while the transition group finishes animating over 10 seconds. All right, let's check what we've built. I don't think it's going to look great, but it should demonstrate that it's working. So I'm going to navigate to page two. And indeed we dropping from above and sliding down everything

And indeed we dropping from above and sliding down everything that you've learned about CSS key frame animations can be applied to the old page and the new page here. So you could have an animation delay, you could change the transition timing function and anything that you want to do. But let me show you a cool, arguably much cooler way that you can use CSS view transitions. And it's to let the transition happen from

that you can use CSS view transitions. And it's to let the transition happen from page one to page two. Check this out. I am going to get rid of our view transition new and old, and I can also delete the key frames that I used to demo that. Uh, I'll keep this because we might use it again. But now what I want to do is hint to the browser how to connect, let's say the square one here on page one

But now what I want to do is hint to the browser how to connect, let's say the square one here on page one and the square one on page two. So this is the page one's markup. And you can see our square one has a square class and then a square dash dash one. And if I go to view transitions two, we also have the same square with square dash dash one. And so let's target this. In the CSS, we already have styles for our squares.

And so let's target this. In the CSS, we already have styles for our squares. So you can see the base styles for each square. And then on page two, this is where the punch in the face effect happens, where each square has a different transform. But what I want to do is target not just for page two, but any square dash dash one. So this is for both pages one and two. And here I want to give it a view transition name view,

So this is for both pages one and two. And here I want to give it a view transition name view, transition name. And this can be any string. Let's call it square dash one. Okay, so with this one line of CSS added, the browser should now see the pairing of the square one on the first or the old page and the new page. And it should automagically do a transition between the square as it looks on page one

And it should automagically do a transition between the square as it looks on page one and the square as it looks on page two, which is mind blowing. All right, you ready? Pay attention to square one at the top when I go to page two, who that's pretty cool. Yeah. Uh, let's go back to page one. And as you can see, the square scales a little bit and rotates through the default duration,

And as you can see, the square scales a little bit and rotates through the default duration, which is something like 0.2 seconds. I'm not quite sure. Let's do the same for all the squares. So copilot should know what I want. Of course it does end square three. And let's remove the empty space. And so now all of the four squares should be connected on page one and page two. And let's take a look at what happens when

page one and page two. And let's take a look at what happens when we navigate to page two. Ooh, that is very cool. Nice. Please note that at the time of recording this video, the view transitions are not yet supported in Firefox. But the good news is if they're not supported, the user will just have the normal page refresh, transition, or no transition that they will have without any of the stars that we've added.

or no transition that they will have without any of the stars that we've added. So it's basically sort of a progressive enhancements at this point. So remember how we had changed the animation duration on all the view transition groups? Well, maybe here, let's make it two seconds, not 10. But what I wanna do is instead of the star selector, I want to use one of the transition names that we've used. So let's take square two

to use one of the transition names that we've used. So let's take square two and we are going to target this specific string. So view transition group square two, change the animation duration to two seconds and check what happens. Square two is the second one from the top here. And let's look at the animation. And as you can see, the square two takes a full two seconds to transition where the others have the default duration.

And as you can see, the square two takes a full two seconds to transition where the others have the default duration. Come on. How cool are CSS view transitions? And we really didn't have much work to do. So to recap all that we had to do to make this cool transition happen, we had to enable at view transition navigation auto in our CSS, and then we needed to give the same view transition name to the elements on the before and after pages, or the old page and the new page.

to the elements on the before and after pages, or the old page and the new page. There is however, a little gotcha that we are going to expose in the next example. And that is that you must have only one element on the page with a unique view transition name.