Document View Transitions

[00:00:00]
>> Kevin Powell: Now the next one we're gonna be looking at is the same document view transitions. And our filtering section is the perfect area to do this. It's really easy to add in these types of view transitions as well. So for the same document, view transitions, though, it's not the CSS rule like we saw before.

[00:00:14]
So once again, I'm gonna use back ticks here and to say mushroom card-${mushroomId}. So once again, I'm gonna use back ticks here and to say mushroom card-${mushroomId}. So for us, our filter cards would get that so if we go back to our code, and we go back to our mushroom filter.

[00:00:36]
Where we were doing our filter cards here, we could just do our document.startViewTransition.
>> Kevin Powell: We only want one of those filter cards, and there we go. So just by doing it like this, it's going to run across same document view transition. And by default, just like we had before, it will be a fading animation.

[00:01:03]
So here we can bring this to be spring or it didn't work. Let me try it again, did I save it? So here, where we have our filter cards, we can bring in that document.startViewTransition, and then in here we want to do an arrow function like that. And then we can filter our cards.

[00:01:25]
>> Kevin Powell: Sorry, that should be dropped, no, it doesn't. And then we just close the parentheses there at the end. And now, when we come and we filter our cards, you can see that it's fading. Let's go to summer, it fades over instead. And let's go back to all and all, and you can see the cards sort of fade in and out.

[00:01:44]
This probably be more obvious if I make this bigger, so let's do it like that. And then there we go. Looks nice and pretty, and we have the view transition working no match. It still sort of fades around instead, which is just a really nice way to enable this.

[00:01:58]
A little bit nicer of an animation happening. We can definitely do more with this but I did mention we want to do a progressive enhancement. And right now, this isn't a progressive enhancement. Right now, this will actually break browsers where the view transition isn't supported. Because it's only going to work if the browser has the start view transition in there.

[00:02:17]
Right now, this will actually break browsers where the view transition isn't supported. Right now, this will actually break browsers where the view transition isn't supported. So we can say, if the browser doesn't have a document.startViewTransition.
>> Kevin Powell: Then we just filter our cards normally.
>> Kevin Powell: So to do it without trying to do a view transition.

[00:02:45]
So right now, this should still work fine, I mean a browser where it's supported. And we can see it faded if I turn this off, or I won't turn it off, because it's not going to work at all, because my browser does support it. But If we do it through where a browser is not supported, it's just gonna fire it regularly.

[00:03:02]
And if the view transition is supported, then it's going to do it with the view transition on there. Now the one thing with that is you don't want, if the browser gets to this point and it doesn't support the view transitions, you sort of want it to end here.

[00:03:13]
So you can add a return here as well, so that way, we're doing start view transition, it doesn't have that. It filters the cards and then it returns just so it doesn't run into any problems with what's following after that. It probably wouldn't cause an issue anyway, but just a little safeguard right there.

[00:03:29]
Now, the animations are fine when they're filtering this way, it looks kind of nice. They fade in and out instead of it just changing right away. But this is the type of situation where you can very easily make things look a lot nicer. And that's because we can add some movement going around if one of the elements moves.

[00:03:46]
And that's because right now, what's happening is, let's say I go to Spring and I have my False Morel that's right here. And then I go back to all. That False Morel is still on the page, but it's like moved all the way down to here. And right now it's just fading between one and the other, because the browser is not aware that it's the same element, if that makes sense, it's just, it's updating.

[00:04:08]
There's a whole bunch of new stuff there, and it just fades everything into place. But I could actually tell it that's the same element, and that instead of fading from there, it's actually going to move it from one place to the other. For this to work, every element needs to have a unique view transition name.

[00:04:24]
And view transition name is a CSS property, and it's one of those things that's a little bit frustrating if you're not using Javascript. Cuz if you're not using Javascript, it means you're just doing nth-child(1) view transition name, and child to view transition name. It can get old really fast.

[00:04:40]
With JavaScript, and if you are using view transition names, unless it's for one very specific thing. I would strongly recommend doing it with some JavaScript, like we're going to do now for all of our cards. So for this, we already have our cards, and we have a forEach going right here, but I don't wanna include Included in this forEach statement.

[00:05:00]
Cuz this forEach is getting, every time we filter our cards, so every time I change to Summer, we're firing that again cuz we're filtering through the cards that are there. And I don't wanna make the browser reput all of the names on there every time, cuz that just seems like overkill.

[00:05:14]
So just at the beginning, when the page loads, we can have this come on all of the cards, and then they'll just be there all the time. And it just does it once, instead of every time we filter our cards. So we can say cards.forEach. Once again, we just say in here, we're gonna say card, but we're gonna look for two things.

[00:05:34]
We need your card and the index, cuz when you do a forEach, you can keep track of every time it loops through. And it knows the number that's coming in there. And we can do our fat arrow, our curly braces, and do some stuff with these. So for this, we're going to say const mushroomId is equal to.

[00:05:55]
I'm going to put back ticks here, just so it makes it a little bit easier to write what we're doing. So we can say that we have our mushroom and then we can come in with a dollar sign. And then, by doing this, we have a string here and then inside of this, we can put some JavaScript.

[00:06:12]
So in right there, between the two parentheses. Again, say Index +1, the reason I'm doing +1 is because the first index would be zero, so just count from 1 and go up. And then so that's gonna keep track of the ID for each one. Then we just have to do card.style.viewTransitionName =, and then we put whatever we want it to be.

[00:06:43]
So once again, I'm gonna use back ticks here and to say mushroom card-${mushroomId}. Nothing should look like it's changed. But if we come and take a look at each one of our cards, we should see, let's put this back on the side. It'll be a bit easier to see.

[00:07:11]
And we can grab that card, and I can see there's a view-transition-name and mushroom-card-mushroom 2. Maybe it's not the best name in the world. It really doesn't matter. So I guess we could take this mushroom off and just have it as card.
>> Kevin Powell: There we go, so now we have view-transition-name: card-mushroom-1.

[00:07:32]
The next card after that will be our view-transition-name: card-mushroom-2, 3, 4. For as long as every one of them is a unique ID. It really doesn't matter. You just need them all to have their own view transition name, and then just by doing that. Now, you'll see that they actually slide around when we're filtering them because the page is able, or the browser is able to keep track that.

[00:07:55]
Okay, these are the two same things when we're going from the old state to the new state. So instead of just doing a cross fade animation, when it does, it actually takes a picture of the before and the after state. So in that, when it's doing the transition, now it can actually move the thing across, which is, it's magic.

[00:08:14]
It's magic. I don't really know how they figured all this out. But I'm really happy that we have it now, because it's super cool how easy it is to do this type of thing, and I'm really happy that we have it. And once again, if you wanted to do fancier stuff with this, you have those view transition names on there, you could definitely go through and add your own animations and try and play around with it.

[00:08:35]
In this situation, I can't think of anything too crazy that you'd want to do. Just sliding around or fading in and out seems to make a lot of sense. But if ever you want to experiment with this a little bit and add unique animations while they're moving around or while they're fading in and out.

[00:08:48]
You could definitely take play around with it and see what you can do with them.
>> Student 1: I want to know if your transition is affected by slow connection?
>> Kevin Powell: That's a really good question. I don't think I don't think so. If it's affected by slow connections, potentially it could be on cross-document ones.

[00:09:09]
Because that is the one with a cross-document 1, it does have to load the page before it starts the transition. Because it needs to know what they get. It loads the page, takes a picture. Extra of it, and then fades over to that. So if you're on a slow connection, it's possible.

[00:09:23]
And even right now, like if you're on a good connection, when you click that, there'll be a slightly slower experience. So it would be potentially something that's worth testing and seeing how it's being impacted. Yeah, that's a good question. I know there's ways of optimizing it too, because you can actually put blockers in place to make sure that it's doing it properly.

[00:09:51]
I don't know enough about that to go into detail, but the Google Chrome developers blog, Bramus has a few articles on them that go really far in depth on the stuff you can do with it. Yeah, but it does talk about that as an issue and in our JavaScript design patterns for web apps, course, Max Berman has a few lessons on view transitions too.

[00:10:14]
>> Student 2: And they're in the context of a Javascript app, and there's a little bit of coverage in like. Responding to the events on both ends of the transition.
>> Kevin Powell: Yeah, because you can get really deep in and knowing what the page swap is, and the page coming in, the page coming out.

[00:10:30]
When you're doing it, it gets deep really fast. But on the simple level, you can do some really cool stuff without too much work.