Morphing Elements Between Pages

[00:00:00]
>> Maximiliano Firtman: Let's see if you understand what I want. Can you see that cappuccino that they have here at the bottom this one? So, I want this cappuccino, if I click in the cappuccino, I want this cappuccino to morph into the cappuccino that we have here, like a nice transition.

[00:00:19]
So, I want that because it's the same cappuccino image I wanted to move, then you feel the presence of the same element going in and out of the page. Can we do that? Yes, we can it needs a little work, but we can, so how to do that?

[00:00:38]
Well, what we need, is we need this image and this image both, they should have the same view transition name, okay? The same view transition name. Something that I didn't mention, is that you cannot duplicate view transition names. So, I cannot use, for example, you can say, just put image, like product image here, and you're done.

[00:01:05]
It's not gonna work because this one shouldn't have product image, each image should have its own name. Does that make sense? So I can use a product ID, for example, on each one, let's see if we can understand what we are doing. So, if I go to components, productItem.js, this one represents the every item that you see here.

[00:01:30]
So, it's a web component that represents that part. So each product that we have here, okay? Inside here, we have an img declaration. Well, I will have some code there, I will take the same img element and I will change style.viewTransitionName. And the name can be, for example, let me go back there, Image- and the product ID.

[00:02:03]
So now, the image of every element will have its own ID. Now I need to do the same on the details page. The details page, the image on the details page should also have the same ID. If not, we won't see that nice transition, the morphing transition that I'm expecting.

[00:02:29]
So I need to open now detailsPage.js, and there is also here an img declaration. I need to do something similar, just copy the selector, even if we don't know what that is, it doesn't matter. We just take the same image and we change the style, view transition name, and we apply, I'm using a template string, image-this.product.id.

[00:02:57]
Just following the pattern that I see on the previous lines. So now from an element point of view, the idea is that each image has the view transition name on both places, okay? Make sense? Cool, well, now, we need to apply some CSS styles. So we need to create a new group.

[00:03:26]
Actually, the group was created just by defining the view transition. But now,
>> Maximiliano Firtman: Let's try this as it is, and see what happens if something happens. So I'm going to reload, I'm going to click Black Americano, and well, we don't see a lot here, but it's kind of not so bad, right?

[00:03:54]
Let's try with the cappuccino cross your fingers, boom, it goes in and out, which is pretty cool, right? Just because they have the same view transition name.
>> Maximiliano Firtman: Just that, and by the way, they don't need to be the same element type. So, right now there are 2 img's, but there is no need for that.

[00:04:25]
Maybe the effect will not be the same, but you can morph any element into any other element, they just need to have the same HTML name. And then, you can even customize this even more.
>> Maximiliano Firtman: If you wanna target this image, for example, from CSS, the problem is that this image is in Shadow DOM, which means I cannot change it from here.

[00:04:57]
Again, we are not talking about Shadow DOM and web components in this workshop. But the problem is that if I wanna target that image, actually the way to target that image, it's the image in a detailed space, okay? Something like that. The problem is that it's a Shadow DOM, so from the outside, I cannot get into the CSS of the web component, it's not gonna work, okay?

[00:05:21]
For example, I may wanna change the width and add a margin, something like that. But it's not gonna work. In case you wanna work with that, just the pattern to do that. Again, what's going on for those of you without experience with this? From the main CSS file, I'm trying to change a CSS of that image, I may just say, it's simple, that's the image.

[00:05:52]
So, it's the img inside detail space, but it's not working because it says shadow root. That means that this is kind of private from a CSS point of view, so by default, it's not open to the outside unless you create a Shadow DOM part. I said, a what?

[00:06:14]
Shadow DOM lets you define parts. And a parts, is kind of a window that you open to the outside so anyone can see and change, for example, your CSS from the outside, okay? So, in this case, it's inside the HTML in a template, we have one template per page, and we do have a details page template here.

[00:06:42]
Here we have an img and you see that. Well, here we're going to add part, okay? So you say part equals to an a name image. Every part has a name. So, this is then a window that the Shadow DOM opens to the outer world. So now, from CSS, instead of targeting the img, you will target a pseudo element that says, part with the name that you set.

[00:07:18]
You will tag, target the part of that Shadow DOM, okay? This has to do with web components, it's a design pattern around web components. So now if I refresh, I need to refresh from the home, actually see this, it's just getting bigger now, okay? So you see that difference?

[00:07:40]
But I changed now that image from the outside. I think it's cool. I remember it works also with back buttons, not just with click, which is pretty cool because it's not tied to the DOM events, actually. And on iPhone, it will also react to gestures that you do on the page, back gestures, forward gestures.