 Welcome to another episode of GUI Challenges, where I build interfaces my way and then I challenge you to do it your way, because with our creative minds combined we will find multiple ways to take over this world, I mean create interfaces and expand the diversity of our skills and in today's GUI challenge we're building transitions. This challenge is a little bit more about like masking and specifically masking with clip paths. So how do we get effects that sort of allow us to transition elements from one state to another with a kind of elegant, you know, cinematic type of transition. So there's like, you know, I have these like wipe transitions here, oh peekaboo, there's a little icon you should recognize that one. Anyway, right, you're like revealing things and in some ways you can like reveal something and then as it comes back you can have a different item here. So there's like a two part transition where you're sort of like phase one out and then bring one in, which is kind of like what we do here. So we make trick go out and we make trick come in. Same thing with here. We have trick or treat, trick or treat, right, very on brand for Halloween I think. But yeah, we have trick or treat and these are kind of tricky in that they had to be stacked, right? So in order from one to transition to the other kind of seamlessly, they needed to exist in the same layer and I did this with grid and we'll check that out in a sec. That's essentially what we're working on today is these and then down here we have these square out and square in and then whatever we're going to do here and we're going to build those live. So before we do that, first we have to reveal what there's a mystery square in the center. We're going to have to figure out what that is here in a second and we're going to go look in the debugging corner. So let's go there and check out what we got. Clip path has very good support and there's really only one thing to think about it with clip path. So here I'm using the active class on these to do this transition. Here it is in Safari. So we saw it on iPad there. Here's Safari looking good. Safari on iOS. Excellent. Everything as we expect here just down on Android. Circle out, trick or treat, trick or treat. Very cool. Love the colors. And then look down here. We have reduced motion. Just sort of like instantly doing things, right? Circle out. Well, now it's out. Here's this one. It's out. Now it's in. This one transitions between trick or treat almost instantly. This one does do it instantly. There's a slight delay in this one, which I could take out so it's a little less flashy, but I don't know. I didn't, I didn't think that was too harmful there. So we have trick or treat down here. Why about, ooh, you got like a little sneak peek. There's like, ooh, ooh, we'll get into that one in a second. And then these down here don't do anything. So putting the transition styles behind reduced motion is how I did that. So here we just pop in here and look to see, well, this person is currently preferring reduced motion. So they're not going to see any transition styles down here. I'd have to change it to, well, let's just change it. We'll go here to system. We want the rendering. Rendering right here. Scroll down to, yeah, it's prefers reduced motion. It's currently set to reduce. We'll say no emulation. Now we get our emulation. Well, how we get our animations. And we can look down here. Ah, yes, prefers reduced motion. No preference, set a transition. So it's that easy to gate these things behind a user preference. There's how I did that there. I guess I'll just leave it now that it's there. And really, if I'm going to leave it, I can close this, which now we can get that sort of full view here into these effects. And then here it is in Firefox. And so one of the things I was mentioning earlier to note was that there's a performance issue with Clip Path. And really, it's kind of debatable whether it's not an issue. I've seen Clip Path perform really, really well on low end devices. But I've also seen it perform poorly. It kind of depends on how much it has to compete with, because it's generally not off the main thread. This is on the main thread. This is like a CPU based animation, unless you're in Safari, which I believe Safari has put this on the GPU. So they get really nice performance in their Clip Path animations, because the GPU is doing it. There is a Chrome effort to make this a GPU accelerated animation. It is, from what I can tell, a little stalled at the moment. But there's hope. There's hope that this animation could be GPU powered. And then you kind of unlock its potential. And maybe you can get more extreme with the way that you use it. I don't know. But anyway, that's the one thing to note about it. This is generally a CPU animation. When we're talking about animations, usually someone has to say something like, we'll animate the transform or opacity. Everything else is sort of off limits. Clip Path is not included in that list. And it is something you should be thinking about, as you're kind of coming up with these animations using Clip Path. So OK, now that we've seen it work across all these browsers, also kind of cool here, I can tab into here. And since I made it focus centric, you can use focus, which is kind of cool. And here's our last one. Let's just reveal it. The one that's hiding in the center here is a link to ChromeTober. So the last episode on tooltips, we went to Design Sember. And today, we're going to go to ChromeTober on web.dev. Scroll, scroll. And here's a project our team came up with to showcase container queries and scrolling to animations. And it's called ChromeTober. And you can go through this animation. So as I scroll, see how the scroll bar is moving down here. We're causing an animation on the page. And we're animating elements in and out based on their presence inside of the viewport. Super cool stuff. I really think you should check out this project that we made. It's really fun. Lots of little Easter eggs in here. And of course, here's the team that built it. And kind of neat. So anyway, that's just like a small plug. And it was an exciting piece of art to throw into the center here. So that's the ChromeTober 2022 book. Go ahead and check out that project. Just like we did design somewhere last year, we did ChromeTober this year. So we went on a spooky route instead of the Christmas cheer. And it's fun. I think it turned out really nice. So check out that project. OK, so what we're going to do next is we're going to go back into Canary in the big screen or Chrome. It doesn't really matter. Clip path is going to work right there. And we're going to edit some of those transitions. And then we're going to write some new ones from scratch. Let's go do that. Time to unearth how the clip path transitions are working. Get it? That was like a zombie joke. Maybe, I don't know. Anyway, all right. So here we have our container. And we have a box. And the box is what is transitioning the clip path. And the container is what's looking for hover. So right off the bat, it's critical that this happens. Because if the hover here was clip pathing itself, then as soon as it disappeared beyond my mouse, it would start to transition back. And then it would do that infinite thing that hover does. So what we're doing is we're looking for interaction on the parent and then transitioning a child. That way, the thing that you're hovering isn't being masked out an in of the mouse position. So anyway, kind of a small but important thing to note. And so if we look in here and we see our clip path, you can see that I've named some of my clip path variables here. So we have circle in. Well, let's click it and see these. We have circle in and circle out. And circle in is at 75% and circle out is at 0%. Let's change this right here and just see what happens. If I shrink it, I should start to see, yeah, look at that. We can see the things that are using it and they're transitioning to that space. So one of like a cool tip with clip path just in general, even if you're not animating it, but as if you go 50% in the circle, look at how it's a perfectly fit circle. You might be tempted to use border radius to do this border radius, some big number, maybe border radius 50% or whatever it is that you put in there, you could also just clip right there and do circle 50%. That's a cool tip. I like using that for circles all the time because I think it makes sense and look editing it is just so nice. But okay, so what we had though was 75% and if we look, it is perfectly the value or 70 perfectly the value, 70 is perfectly, oh no, look the corners look a little rounded there. So if we go 75%, we're ensuring that as we interact with this, it's gonna scale to the entirety of the viewport of this like particular element that we want to mask. So that's kind of a cool thing and look at how simple this syntax is. So if you're wondering like what it's like getting started with clip path, like let's look at our square down here and just like give it a quick little clip path here, we'll say clip path, circle, you know, 25%, boom. That's how easy it is to make clip paths and circles. Like that is cool stuff right there. So tuck that into your belt for like use cases and things that you can do with clip path and let's go look at the syntax for these ones here, the wipes. The wipes are using the, well here let's go to wipe in. We'll look at the different ones that's using insets. So we have a wipe in set here to like it's fully visible. See how there's no inset values at all and these all have inset values that sort of complementary sides. So this is top right, bottom left and we have wipe bottom is saying inset top 100%. Well here, let's just go check this out. So we'll just edit a clip path directly on this box. We'll set clip path here, we'll paste and I'm also gonna change these to percentages, percentages. And that way we can go edit them. So if I hit shift and down, I can see that we're un-pushing away from the top. So in this case, I'm pushing away from the top, top, top and it gives us this effect of wiping out towards the bottom of the box. I can also pop in here and start editing these and this one's pushing from the right, pushing from the bottom and pushing from the left. And these are all the different ways that you can sort of manipulate these transitions to look like, you know, like an animation like something is smearing across the screen. That's what I call them, the wipe animation. Let's go back down to zeros here. And so the way that I just, I found all those custom properties is just by testing these things out. So I could tell that this one is gonna be a good one for that particular scenario. I'll set this back to 0%. This one, if it's 100%, looks like it's wiping out to the left. This one, if I edit it to 100%, it looks like it's wiping out to the top, right and to the right. And we'll just go look at those custom properties and named again because, well, it's much easier reasoning about these values if they're named applicably. So it's cool having these names. And then when we actually do the animations, also we'll get rid of that here. We can see this one's animating to an in position. Let's look at this one. This one, we'll make sure we're selecting the box and we'll make sure that we're hovering the element so that we can see the style that's being applied to the one here. And there it is. It's going from a wipe bottom position. So that's its default. And then as soon as we hover on the apparent element, we're going to give it a wipe in animation. And that's what gives it that, it restores the clip path to where there's pretty much no clip path. So we went from one that was pushed out to the bottom to one that is not there at all. And that is the basis of that trick. So let me pop out of here. All here and turn off this hover so we can get back to an interactive state. And let's look at how these ones worked like trick or treat here. So this one, we have a stack. So if we turn on our grid overlay, we can see that we have a single cell. See how there's only one box in here? And we can look at our definition of the grid. It says auto flow, which is required if you're using the shorthand here. One FR slash one FR. So it says single column, single row. They're in the same spot. And if we look at these children, they're saying I want to be in the first row and the first column and both of them are going to be defined like that. So they're competing for that space and the browser will stack them on top of each other, which gives us a good opportunity to edit their animations here so that they look like they're layered on top. And then we change the clip path. So let's look at this one here. It says wipe left. Let's change it to wipe top and we'll hover. And look, we get a different animation. It's so nice having the custom properties named because then I can sort of like articulate my transition really well. That's kind of cool. It has like a Mondrian box effect too. And I really like it. And if we do wipe from down there, look at that. That's cool stuff. Okay, well, so hopefully now you're looking at this syntax here going, that's not too spooky, right? It's just an inset. It's almost like if you're using the inset property, it's the same sort of stuff. You've got top right, bottom left. So if that's the sort of way that we're working with these and we're getting all these cool animation styles, what is square out and square in gonna be? So if we look at this one, right? These are undefined custom properties at the moment. Let's play. So we'll say clip path, inset. We'll say 20%, 20%, 20%, 20%. So essentially if we edit these values at the same time, well here, let's make a custom property, same time, 20%. And we'll pop into here and we'll say, oh, we could even do since this is just like margin and inset, it'll repeat. We can say var same time. There we go. And now if I edit this, we get all of them at the same time. Excellent. And really that's kind of irrelevant at this point. If we think about it, let's just put 20% inside of here. It gets repeated across all of them. So now look, that's pretty much the square out animation. Let's also do this transition, clip path, well, 0.5 seconds ease. Now as we play, we'll be able to see a transition. Okay, so if we want to go to square out, that's inset 50. So I could essentially say like square out is inset 50 and square in is gonna be inset zero, right? Okay, so now we can pop in here and say var square out. And there we go. So as we toggle this property, well, maybe not as we talk. Oh, cause it has to have something to find underneath it. So we'll say clip path var square in. Is this gonna work? Let's see. Now, what we want though, is this gonna work? Yeah. Okay, so there we go. So now it knows where it's coming from and where it's going to, and you can see that it's interpolating there really well. Okay, so if that's square out and square in, I can just take these custom properties and let's go into sublime and start working inside of there. Well, I'm gonna work inside of a sublime, but whatever text editor you have in here, let me switch over to there. All right, I've got the transitions here. Here is our square transitions document we're gonna be working with. I'm going to paste these into the root, since these are our named variables we just came up with and we have our circle in. Oh, these need to be squares. Let's call these square. Oh, look, those ones were square. Little preparatory mistake there. All right, so now we have square in box and what we want to do is set its initial clip path to var square out, right? So that by default, it's out when we hover, it's going to come in. So we'll take this, paste that there to square in and we want to transition this, but let's transition it if media, motion is okay. And we'll say transition clip path 0.5 seconds ease. We'll save and go back to our demo here and check if square in, square in works. So I thought we were doing that one, but I guess, yeah, here that makes sense. Okay, look, square in works, excellent. Okay, well, let's do square out. Square out, its default is not gonna be an out position. It's default is gonna be in, on hover, it's going to be out. And then we can also just copy our media query here with nesting and save that. Now we should have square out. So by default, it's in, right? That's gonna be no inset, no clip path. But when we hover, we apply a clip path, we transition it and we have no out square, square out, clip path in, on hover, clip path out. What did we miss here? Let's see. Oh, we have a whole bunch of inline styles on this particular element that are winning. So there you go, square out, square in, square out, square in, you saw how we got there. We're using the sort of shorthand of clip path, which is kind of like circle or getting a really, really similar effect. Now we need to work through this last one. What kind of effect do we wanna do here with like a square transition? So if we look at this, we've already got our grid. We already have stacked elements. Look, there's an emoji pumpkin behind here. And look, if I just click this and hit H on the keyboard, here's a kind of cool DevTools hotkey. If you hit H, you'll hide an element. Look, it applies a style and it says visual visibility hidden. You can hit H to unhide it there. So we can see that that's our transition. And how do we want these to move? Hmm, let's get an initial implementation in here. So here we are in our transitions. We got our square surprise, display grid. There's our grid layout. So all of the coloring is done in here. Now we need to sort of give these an animation. So each box is going to, do I still have that in here? Each box is going to need to transition. The second box, which is the one we currently see, let's give that one a clip path that puts it out. And we'll just use one of our variables for now. We'll use square out. Okay, and if I save and go back, look, now we're looking at the pumpkins because we've essentially masked out the one that's on top. And on hover, we're gonna wanna take the one that's currently straight, nth child two. This one needs to transition in and this one needs to transition out. And if we go back and check it out, look at that. We've got, oh, but it's not going both directions. It goes in but not out. So there's a definition missing somewhere here. And I think it's just a default one here for square in. And now, yes. So now it knows to go from and to. We've made it explicit. We can see that there. Looks great. For in terms of a lesson, I think that was pretty good though. We've got the ingredients are here. And if you wanna look at more clip path stuff, so if we go to look at more clip path opportunities, there are other functions that you can call. So look, there's circle, which is one we studied. We didn't study ellipse. Ellipses like a circle except the two different sides, they're not equally parallel on all sides. You'll get like an oval type shape. And that gives you an opportunity to create oval type shapes. We did go over inset and we didn't go over polygon. This is another really cool one. And polygon is a much more complex. You use two positions for each one. And it allows you to do like diamond shapes, really cool other type of shapes, angular things. It's a much more complex syntax, but you can go find a lot of these pre-made for you and you can kind of work with them. So I thought we would just show the essentials today, work through setting these things up with custom properties and introduce you to polygon a little bit, but I'm not gonna type one out right now. I think that would be a little tough to live code. All right, so that's essentially the GUI challenge today though is we learned about clip path. We learned about, you know, like its performance implications. We learned about how to set things up so that they can stack on top of each other and kind of get really cool interactions where one item is going out and another one is coming in. You can even think about like a form. You hit submit on a form and it goes out. And then it says, hi, we're submitting your stuff to the server or whatever. And then it transitions a new item back in and it says complete. So you can use these transitions to walk people through different guides. You can use it in terms of like state for when they submit things. There's all sorts of cool use cases for it. And the last thing I want to share is I do have a site called transition.style where I've essentially defined tons and tons of custom property clip paths with names so that you can easily test out. Look at this one does a circle into the top right. This one does a circle with a little bit of a hesitation in there, which is kind of cool. So here's the circle. These are in and then you can have out bottom right. So you have like in bottom right, out bottom right. You get kind of a cool effect over here. In bottom right is a lot cooler than let's do out circled top left. I don't know, the in ones look so much cooler. It's cause they like come from the center and then like burst out to the side. I don't know. Here's square ones, right? We just made that super simple set of styles, right? So all of these you can use. And what's funny too, you can see the little like copy icon here. And every time you click one of these it actually puts it into your clipboard. So here, if I open up a new tab and just paste it says keyframes, square out top, right? Clip paths, zero clip paths, right? So you can just come to the site and take these. And then let's check out some of the polygons cause these are kind of cool. So there's a diamond in, here's diamond out, in diamond with a hesitation, out diamond with a hesitation opposing corners, right? Going in and out. And then a new one that just got added is the cinematic one, which I really like because they always do that in movies. We're like, you'll be like, oh, this is cool. But then they're about to enter a dream and it goes like this. It's like super wide screen. Anyway, kind of a cool effect. So all sorts of really fun things can be done with clip path and transitions and animations or just transitioning them like we did today. I hope you enjoyed this GUI challenge on masking and clip paths and have a great Halloween. I'll see y'all on the next GUI challenge.