 Hello and welcome to the SuperJaws live stream. I'm Paul and I'm Serma. Tell me what is better than two dimensions four Let's make a 3d card flip Seven six Hey, awesome, right? So let's get started. Yes 3d who does everybody loves 3d and there's loads of people I already see In there on the chat. We got people from Austria Costa Rica and Netherlands everyone. Hey, welcome I'm gonna be monitoring the chat So keep talking I'm just gonna try to keep up and if you have any questions post them there I'll weven into the live stream and see if we can you know if you can change where this is going Maybe all right So I'm gonna dive right into some code because that's how we want to roll today. You know, everybody's busy busy, right? bit of HTML Let's see what we'll do is we'll drop in a title which we shall call the card flip. Let's call it 3d card flip Oh 3d carpet. All right, let's get some styles in there. So we need to link rel equal style sheet H ref you have to fix the invitation on the title. I know I was gonna I was gonna okay No, you're struggling. Yeah, they get fixed it for you. I think so much better already Isles dot CSS find gonna go with that today All right styles Styles dot CSS CSS there we go So in the announcement people have already said or at least there was one comment saying that if a 3d card flip is not much You'll design no, and that is correct It is because we just do what we do what we think people want to see and what we want to make and in this case We thought people would want to see some 3d card flipping stuff And there is gonna be some I think really really interesting bits and pieces in today because when you talk about 3d You actually have to do a little bit of a little bit of figuring stuff out. Yeah, we're gonna use CSS transforms or open GL Hey, my watch is a I've reached my goal for today. You'll be thrilled to hear my watch tells me how active I've been I've just hit a hundred percent because there's nothing like I did you did some excessive typing I did do it. It's all of excessive. Obviously. You just decided. You know what if you want to stay fit type more Live coding on YouTube is one way to stress your heart So I do that apparently anyway, right. Let's make a Let's see SC Card little just go with SC card today. Why not? We also have the question. Is this real life? Yes? Yes, it is very well Is it are we doing this for real live? Yes, we are it is really life like as I said keep posting questions ask them in the chat or on Twitter and We can answer them for you live That's how it works. Yeah, all right. Let's let's dive into some action. I'm doing that. I'm doing that I've already got so I've got a custom element. I'm gonna do it today Gonna call SC card And let's see we'll put a div here, which we're gonna say class equals front Let's do that because we're gonna have a front of the card and we have the back of a card So we'll put say supercharged on the front of this card Div and then we'll do another div inside it, and then you don't have to do it this way There's loads of ways to do it. Let's do class equals back and I have sort of thought ahead a little bit here You I know and we actually have I made this little little thing for the back of the card Little supercharged graphic there for us to I know I wish I had her so it's fair Would change hair if possible they are right so front of card back of card I'm gonna I what I'm gonna do just gonna temporarily just pop a button on here And we'll say flip card. So That's fine. It's not gonna look great, but we'll just put it there for now Right, so we've actually got some markup Let's go ahead and so I guess drop some in case someone doesn't really know what a 3d card Oh, you're just starting with front and back what we're doing is we're gonna have the card like you might actually know from material design And I guess this is why people thought of material design Yeah, this and we're gonna flip it over in 3d. Yeah, so it's gonna come out of the screen I'm gonna flip over and then drop back onto the screen And we're gonna have to do some work with like baking shadows and stuff as well for it to look right But we can start by having the front of the card at the back of the card And then we'll work out hence the two class you will work our way from there So we're gonna have to do a little bit of styling to get this underway though body Let's say Width 100% right 100% in fact, I'm gonna have to do that in the HTML as well Whatever's right do that and then I'm gonna say that the HTML is gonna be display flex today And it's gonna be doesn't actually matter. We can do this box hot mess align item Center and then justify Content center. I think that does it well the SC card and I'm gonna go because I've already got this image So I'm gonna make my card. What is this? It's 260 by 380 so I'm gonna say my card today is with 260 For what it's worth I have Done this kind of approach before and you can make the cards responsive So I am hard coding these values today, but this technique works even Dynamically it does get more involved, but the the concepts are the same I guess this also makes obvious that this is not the production ready code We're probably gonna repeat in all future episodes as well This is more about the techniques on how you achieve certain effects without Dropping down to two frames per second because you can easily shoot yourself on the foot if you use CSS the wrong way But if you want to do something like this on your production website You should probably tidy up the code and maybe yeah, you know do some testing and other other browsers as well Which we are not going to do today. Correct. So what we're gonna do is There's the first one of the first things that we're gonna see here Right, so we've got the front and the back So what I've said is the the containing element the card a position relative said it's width and height Then the actual front and back I've said back face visibility to hit them because as we flip the parts the front to the back of the card over we want that to We want the contents to disappear as it's flipped. Okay, and by default I don't think back face visibility is set to anything other than visible So we want to be back face visibility what we would see otherwise I think and correct me here if I'm wrong is that one of the cards is always run at first Yeah, independent of where they are So it means we would just see the top card the top half of the card, but rendered backwards Yeah, which is not what we want. That's why we set it to hidden, right? So we have that and we need to do a little bit of right. So let's say background We'll have a look at what it's actually looking like in a second Let's do that fellas make it a little bit Darker there and then we'll say so we're going to say the front of the card I'm going to say the front of the card is background What we got? Let's do it four four four color And I'm also going to set The contents of the card to be sent or central like so, right? Let's see what that looks like, okay? So actually we are in a reasonable spot here That's a good question. I think it's because of the the The way that this screen is set up so that they can do the live-streamy stuff 16 by 9 I obviously know loads about live-streamy stuff as we have seen the promo You did turn on the camera successfully, but that's about it. Oh good, right So what do we got here? We've got the front of the card and the back of the card Let's do the back of the card as well while we're here Back of the card interesting question on the side Where do you think what you're about to write the flipping card is a reasonable even a good choice in terms of UX I Think yeah, I think intuitively It's very very good choice for anything that where you have Details that you want to hide and that the user wants to look into so you have like a topic Which has the big topic name on it and when you click on it it flips over Just like would like an actual flip card when you do like a flashcards I think you call them when you'll try to to learn words when you're learning language So here's what we've got here We've got the front of the card and the back of the card is just appearing over the top, right? Yeah, so what we can start by doing now is we can actually say transform Rotate and I'm going to go with the y-axis So we're going to flip around the line down the middle so the cars are going to come forward flip around it It's vertical axis and go back. We could do it over the x-axis as well That would also work so and we can see how we get on whether we want to actually pursue that one today now with It's the back face of the the card hidden. It's still there, but we won't see it So we're doing really well. Let's add on let me see Say what we'll do is we'll make that an h1 as well like so Let's just change the font family because it's currently not very nice See what we've got for aerial that'll do it And that's still quite monstrously large So That'll probably do it. I'll probably do it and for now let's just change la la la Okay It's gonna hack this in today font size 24 pixels just a bit This this flip card. I'm gonna fix this now as well while we're here What I want is I want buttons on the front and the back For flipping the cars just so that there's a button that covers the whole thing loads of ways you could do this Front and back and oh, oh, oh while we're here. Let's put on a border radius of Three pixels again, just so that we're seeing a little bit of round in this on the corner just it feels more like a car So the front and the back And I want to say that that applies to the button so I could just get rid of that that would do it as well There we are the front and the back How is everybody doing on the chat? It is very much alive today like lots of conversations going on fabulous I've got a question and Did we consider using the animation API instead of CSN animation? Who said we're doing CSS animations? Oh Smarty pants on the chat. You're absolutely right. We're gonna be using web animations today Ha ha I was saving that and you've just come storming in via surma and Yes, you know that the worst part is she's gonna blame me after. Oh, yeah, I'm totally gonna I'm gonna take the Not even afterwards right now his fault there you go Yeah, absolutely. We are gonna go down that path. You can do it with key-framed animations I actually found that when I've been doing stuff like this the web animations API is brilliant for this It's support is actually really not good By default so you actually have to look at there the polyfill if you want to use it So for production again, you might want to reconsider and also custom elements as well. They're still very early days So we're talking about the approach, but I think it is possible to do this with key-framed animations just as well But you know, we like the bleeding edge. We want to teach new things here So I'm gonna go there background non border non and text indent Minus 10,000 pixels for now Okay, so we actually have we have a button there on the front in the back So this is good now. We can actually get into some JavaScript and Let's do a custom element. So we're gonna do sc flip card and I called it sc card. So sc card and We'll see how we're going. I don't think we're gonna have attributes today. So we'll leave those out Okay, so let's think about this. So we've got front and back So I know we're probably gonna have to enumerate that at some point. So let's just do that now with a getter sides Return front one back to So that's one thing and we know when we create it that we're showing the front of the cards So we can say this side equals This dot sides. In fact, if I did static static, there we are can do That side stop front. So we're saying the front side is the one that's showing at the moment Right now. We need to query select the front in the back. So we've got front Equals document query Select or there we are Front I'm having a bad typing day and anybody who watches this show often will know that every day is a bad typing day for Paul Front and back. Okay. So we've got the front in the back and We need the buttons as well Well, actually what we're gonna do is we're gonna create a flip function And the reason we're gonna do that is because we want to be able to call it on the API if we wanted to just grab The card from somewhere outside and say just flip the card We should be able to do that and then the buttons inside We'll just get them to that is the mindset of custom elements, right? And you expose the functions that are supposed to be explicitly. Yeah, so it's our cards are supposed to be flippable So we give it a flip function document dot query Select to all button for now and then we will say Can you you can do for each can't you on on a node list now how well I'll do a radar from This stop Button So interesting remark, I think you did document query selector, but since you have All the sides of the card as shown you could use this query selector and not traverse the entire document Oh, no, no, no, they're good quite right. I actually I fully intended to do that and just it was a Brain problem moment for me there where I just didn't get it quite right. So thank you Yeah, well the people who just joined us or maybe joined us just now. Welcome. This is super charged We're doing a 3d card flip. We're gonna have a card and when you click it It's gonna flip over and you can see the backside and that is actually pretty unusual on the web Which is why it's interesting and we're gonna be using the web animations API. We're gonna be using Lots of CSS and Javascripts and custom elements So here's in that join us and and watch Paul make mistakes. Yeah All right, so we're gonna do So what I've got here is I'm just Kind of stepping through the buttons and just saying when you You know when we click on a button we want to call the flip code which is gonna be this here so let me just Drop a debugger statement in there so that when we click we know that that's doing its job We'll have to wait and see whether the other side does its job But that for now is doing its job. So we actually have to figure out what it involves to do the flip Do we have any attached and detached actually do you know what I should be doing that in here? Probably yeah, so I You know I kind of think that I never can quite remember if you can attach a event listener before you attach it to the DOM and Well, it worked, but I think for cleanliness like you'd normally want to do This kind of sort of attaching and detaching is the point where you can put on the listeners and take them off probably So I mean I'll put it there for now and I should have a corresponding detached But I'm gonna leave it just for now in the in the interest of time Right. So flipping the card So we've got an animation that we need to do. So let's do this const side one Equals and this is this is the where the fun stuff is about to happen because We have to first of all All right Put it this way To do the 3d we're gonna actually have to put perspective on here now anybody who's looked at this In the has been confused by this. Yeah, you put your major perspective in pixels Which is this kind of virtual camera? Yeah. Yeah, how much time have you spent looking at this enough to be confused? I think I think I understood but I have not used it yet. So I might as well be wrong This is gonna be fun. Okay, so we've got perspective of 500 pixels basically What a way to the remember this is the smaller the value the more extreme the 3d motion is going to appear as the perspective value gets bigger You get sort of less distortion and 500 pixels for something like this more It almost looks like yeah, that almost more distant. Yeah, basically it's to do with how much When something's rotated and the size that it is How much it's going to get shrunk or also stretched by basically have a small perspective while you get this fish I look right. Yeah, we just get more extreme 3d motion and 500 pixels is typically 500 to a thousand is normally a good place to start Just for a lot of content. It's a place to start and this is where literally magic numbers come in nobody has yet There isn't explained to me why these numbers are good It's because it will be dependent on how far back you push the thing and how big the thing is that you're pushing as well in in the Zed space so Because of the kind of size of card it is 500 pixels is probably gonna be okay Now what we actually have to do is We're gonna have to push the cards back in in Zed space because what we're gonna do is we're gonna have them kind of come forward Well in order for them to come forward. They've got to be at the back first so also if if you lose track at any point that it's fine the code is going to be on get up later on our UI elements samples repository We're gonna link to it in the description the video is going to be up as a video on demand on our YouTube channel as well If you're not subscribed you should be subscribed so click the subscribe button below cool Right, so we're gonna so side one and I'm calling it side one because depending on which side is actually gonna be the one that we Flip it as in the one that is at the front at that particular moment is the one that we actually have to work with So we're just gonna have side one and side two and we'll hot swap depending on which side is actually facing us Anyway, so we're gonna have a transform now The transform is going to start at we're gonna say and translate whichever it is translate and translate Z Z I'm gonna start with minus 200 pixels. I'm gonna push it back in 200 pixels It's gonna have a rotation of zero degrees. Okay, so it's it's basically pushed back in that and it's got zero degrees So it's not rotated at all. The problem is right now If I were to in fact, let me just drop that transform on just to explain this this array a little bit This is the beauty of the web animations API because you're using you're basically declaring an array of CSS Values and those get transitioned from one element to the next. Yeah, we're gonna we're definitely gonna cover all that Here's the thing. You see what happened there when I actually just applied that that that translate Z value that Z value to the front Yep, you can see that it got scaled down, right? So without it there So now we actually have to scale it back up so that it doesn't look small Right because we don't want to be kind of coding it at 260 by 380 and then going but actually it's only 185.7 1 that's not gonna work for is what we actually want it to do is we want to appear as it was originally So, do you know how you calculate sir the scale factor that you require? No, I Wounded if you were excited I I could probably I would claim that I would be able to work it out But I can't do it in my head. It's it's basically it's in the spec It's this one liner that's actually in the spec. Oh really? Yeah, I did not know if you and if you read through it I will tell you and I thought what they have to do like No camera angle and it's kind of noise the scale value that you require is It will be it's the perspective. So this case it'll be 500 over and then 500 minus whatever the distance so we minus 200 which always just plus 200 right so 500 over that That's how far it's that's how much it's been scaled down. I will have to check that later So that yeah, that's how much it's been scaled down, but you because you so if we did that value Yeah, if we do that it's not point seven one Right is what it currently is so to in order to account for that We actually have to do one over all that lot So it has to be one point four scaled up to to kind of reverse it which code is almost the square root of two There you go. So we can do that instead Would actually do it now. I'm hard coding these values again You wouldn't do it in in for reals because you probably want to make this totally dynamic But we can say or we can trans transfer that across to a template string or we can say scale and then we'll do that Okay, so this is going to be this is our starting point So it's going to be scaled back up, but it's actually pushed back at 200 pixels Then what we want to do is we want to bring it forward To say minus a hundred pixels. We don't want to bring it up to zero because Half of the card will disappear when we rotate it. We want to leave enough space for it to actually It's going on. Yeah, we want the entire card to flip So that's why we are doing this whole dance where we're pushing back But don't want the user to think that it's actually going backwards exactly So then we're going to flip that so at minus 100 we're going to flip it over 180 degrees And then the last thing we need to do is we need to push it back down to 200 like so So these are the kind of key frames of our animation. Does that make sense? They're really happy so far on the live stream is everybody not terrified of that. I don't think they will be there Just back lunch Right, so it's good so far. Yep. Cool. So that's the side one now side two is going to be the back of the card And it is pretty much going to be the same thing except At the moment it's it's already at 180 degrees because it's got its back to us if you like And so we need to rotate it from round from there to 360 degrees Basically back to zero, but we want it to go in the same direction So we'll take it up from 180 to 360 this hopefully should sort us now what we can do is we can switch based on what the current side is So case is that it's flip card dot sides dot front So if you're that if this is the front card We we're going to say this dot front Dot animate and we're going to give it the side one And we're going to have to make some timing data in a second whoops today's Easy Same goes for the back. We want to use side two for that with the timing and we see it's complaining because timing doesn't exist yet Also, let's create it Default because it's probably gonna want that we can throw a new era Well, that happens something really good. Yeah, unknown side is where I'm going like the good old days When you have enums and suddenly yeah, something goes really really very strangely wrong So we need to do the back. So it's the back of the card. We're going to do side two there and side one Okay, so this we just now need some timing information here. Well, it doesn't doesn't like it because it's I'm throwing There you go. So timing const timing is It's an object and we're going to say duration and we'll do it slowly at first We'll do it for like three thousand. So that's three seconds iterations. We'll look at it one Easing we need some of that and we'll say ease in out so that we get a nice easing on it And then we need a fill and the reason we need a fill is at the end of this animation We don't want it to snap back to the first frame. We want it to hold on the final frame So we'll fill forwards, which is the correct keyword for that So this should look like all these keywords should look very familiar to evident CSS animations Yeah, which is exactly the point. So basically what the dot animate call does is it takes an array of CSS property dictionaries and it will animate from one dictionary to the next one and to the next one too It has gone through the entire array so you can basically Define a sequence of movements and they will be executed as one animation very smoothly. Exactly And so what we're gonna do is I'm just gonna remove that transform that I put there Okay, all being well. He goes up flips goes back look at that. We actually have now a car flip now I don't like the timing of it Because when you if we just bring it down a little bit faster or a little bit Yeah So it's okay most of the time is spend and lifting up and down and flip itself It's very yeah And also it feels laggy to get to the flip point the the interaction that you always want with these things is Kind of do the thing that the user that actually kind of asked you to do as quickly as you can So what we want to do is we want to front load this animation so that coming coming up forward is actually Gonna happen faster get into the flip and then get and then come back down slower so what we can do here it is We normally would do an offset In side to the object and you put in a value between zero one and so and zero point one five It's gonna basically normally if you don't put it it'll be zero zero point two five Zero point five and zero point seven five. I don't know what it would be zero zero three three six six and then one so you have the whatever the Entire duration is the start is zero the end is one and you can define the start points of all the steps Yes, the sub steps by putting in this offset value, which is a value between zero and one So I'm going to do an offset of not point one five for when it's coming forward I'm going to set it to say offset naught point six five here for when we are at the Flip point so we spend half of our time rather than a third of our time We're going to spend half of our time flipping the card over so hopefully it just a touch slower Let's see how that looks Yeah, so that comes up quickly You good. Yeah, I'm just turn come multi-task right is We got some questions and people sharing links answering questions for me already, which is amazing Thanks for everybody who's helping out Looking good. Yeah, really good. So what I've done is just by Finish it finished typing and I can talk to you dude. Sorry. You're good. No, you're good You're good Okay, so what I've done is I've used the offset and and now it's actually it's a little bit sort of slower So they're kind of lifting up faster Other things in the array keep the same default office of the last one is still zero points. Oh, you to change So yeah, I've changed these so it's basically this is this is happening What the cards coming forward by not point one five is taking half of the available time 0.5 if you like to do the flip so the flip feels slower and then push back Like we had it before from not point six five to one So coming forward is not point one five and it gets not point three five to push back So the slow down at the end is more strongly felt, okay? Okay, if you hadn't passed in the zero point six five It would have still had the default value of divided the available time should be not point eight five between these two Okay, that means which you can play with these numbers and just trying different feels And now it's also affected by your easing as well because it's going to try and kind of figure out that kind of stuff Question on the side. What do we use to build for ear six? We use nothing We currently do not use everything that is available in the current chrome stable. I think yeah I'm actually running in canary today, but yeah chrome stable I believe has all of these all of the same things if and one of the things we say on the repo is that if your Plants use this code or something like it. You'd obviously need to transpile it or do something with it But our goal here is is partly to sort of show some of these new things and it's partly to You know choose the kind of correct thing that we think for the job that we're doing in which case This is actually a really good use for web animations. It's a really good use for custom elements So we're kind of taking advantage of both of those but in a production setting as server said right start You probably have to do some yeah dancing to make make sure it's doing the right thing for you, right? All good We're actually doing really well, but what we need to do is at the end. So The thing is at the moment It when we click it the second time it goes back to the first side So for that for a temporary and we'll come back to this and we're just going to set the side To so if the side is currently SC flip card dot sides dot front if it's the were if it's the front of the card that we've seen Then the side is now going to be Dot sides back Otherwise It's gonna be Front again, so this love these kind of expressions. They always feel so redundant So yeah, so now we know we can basically you can see how we're actually card flipping. We already are have a pretty Pretty thing going on there. This is really good fun. It's so much fun to keep that thing there. I want to do it It actually works. There's a it does work amazing now. Here's here's something that if you've not seen Rob Dodson's Ali casts yet It's a brilliant show very new on the channel and one of the things he talked about in I think the first proper episode was the inert property Which basically at the moment these two buttons for flipping the card both sides of the card You've only seen one at the one at once right and so you want to be able to kind of say to which everyone's the back side of the card You shouldn't be tubbable right now You take a tap to both the front side button and the back and you wouldn't even know where the tap focus is when it's on the back side But when you press enter the button would still get clicked. So if I do Document dot active element So this is not going to help you can yeah, well you yeah Paran parent yeah, so so for example here. I had it as it was the front but if I tab again It's the back so it has focus we can't see it But if somebody pressed enter or had a screen reader, yeah, he would hear things that are not even there We didn't intend them to use exactly. We want to kind of we want to handle that. So inert is a thing There's there's a polyfill. I've I've gone ahead and actually added it into this folder. So we're just gonna pop this in Like so and what we'll do is in the card flipping code here when we are being snarky about you using an enum Not just a boolean for which side is okay. I'm fair enough They I mean technically this could be is the more extensible expo approach when you want to have a flippable cube at some point or something Yeah, I know who knows definitely valid point We could have used a boolean to have all of this logic be a little bit simpler But in this case, I guess it's more explicit and more extensible. Yeah, you could and I actually like the readability of saying This is the front side. It's the back side But you could you're right if it was a billion then we could say this side is not this side Which would flip that immediately and that would also be perfectly a reasonable thing to do So I'm gonna start by saying this dot back dot inert because I've added in the inert polyfill It's true and the front I'll suggest it to slap ourselves on the back the thing that Rob Dodson fixed with his inert polyfill in that Allicast video was our side nav one of our very first life I'm really slapping ourselves on the back so much as actually having our work correct. I tried to frame that nicely here Let's just make us sound good. Yeah, you fixed our side nav Which was in terms of accessibility not good So we're gonna say the front is is not inert the back is inert for now And then obviously at this point we can pretty much swap those over so the front is now inert and the back is not and Here the front is inert and the back It's sorry the front is not inert in the back is so you know again You know you probably could tidy this code up and it is very repetitive So there is it would be ways to to resolve this. I'm sure but it does mean that we have that well, ah For example do that and then if I go back in and tab again You see we don't get we don't go through to the back elements So it's basically toggling the availability of that those elements very easily for us It's a brilliant little thing is the inert Property I would love to see this become part of the platform personally because I think it just makes you know Makes these things so much more obvious. The other thing we probably want to do as well is we want to say this Dot back dot focus We want to actually make sure that we focused the the correct part of the card because you know I think you switch those a long way around. No, if you're in the back Oh, it's after you come back. So we're bringing you back to the eye in order for that to work We actually have to set a tab index to minus one So it's not naturally tabbable, but it needs a tab index in order for focus to work If you didn't understand it watch Rob Dodson's episode. Yeah, and also there's a there's a Udacity course as well So that's well worth taking as well so we're doing really well all I want to do now I say all I want to do is I want to add some shadows and That's gonna be fun And I can't decide do they want us to do the bit that doesn't perform well first Or would they like us to jump to the one the bit that performs well There's a question for the live stream I'm gonna make a call for them here and we want to see the leggy version first Okay Well, it's gonna be hard to do the leggy version without a phone But I will put it up and then we'll talk about why this will lag on a phone Okay, so I'll do that. So what we need is we need two shadows Speaking of I think you know we now have landed CPU throttling. Okay, that might do might might do enough We'll do it. We'll do a time in fact actually well before we even get into that. Let me show you this Paint flashing so this will cut every time we repaint the page. You see this paint flashing. Okay, remember this button It's very helpful. So when we what I want to do is just come off this here if You see this there. We see a little bit of we see some paint flashing here Okay, because of the button Okay, but other than that the cards itself. They're not Initial paint and then the entire animation Yeah finishes without a repaint, which is good. Which is what they want and if we so free the other thing is if we did Document dot I'd folks I can do this do it this way if I just grab the card and I say dollar zero dot flip There we go You see there's that right at the start there where we get a bit of an animation So what we can do is since we know we're going to be animating that let's put will change Transform What happened there is that the card that the browser didn't know that we're going to animate this because we didn't tell it so it Rest to write it onto the background, but once the animation starts it gets its own layer So it has to repeat once well interestingly We are still seeing I'm still seeing this where it is it is still painting So there's a bit of a mystery there for me, huh? I have a wonder just let me just set the the buttons to display non see if that Still doing it Interesting. Ah, it's because of the inert stuff. I think that's let's just try switching out inert for a second Seeing whether that that's doing anything for us. There we are. Okay interesting Yeah, so there's something something to be aware of there But the now that we've actually put the inert stuff back on because I still think it's worth having and I still think We'll get away with it. I don't think it'd be a performance issue in reality But I just wanted to show this that right now this card animation is not painting Okay, so with will change we told the browser keep this on its own layer at all times We can start animating immediately without having to wait for the browser to put it on its own layer and then do transforms What I'm going to do. I'm also going to do a timeline recording over here Let me just switch off the the paint flashing not that it's actually going to paint flash But I'm going to switch it off anyway, and I'm going to flip the card again Just so that you can see what the timeline looks like. So this is the back face visibility bit here This is a well-known optimization I suppose that chrome does when something stops being back face visibility Hidden as in no one it's it's got it back to us. It doesn't actually get painted It's when it comes round at 180 degrees chrome says ah, this is now now is a good time to paint this So that's why we see that slight hitch in the middle But it's fast enough that we still actually get away with it We don't really notice it on the way through but it's worth noticing that it's actually happening there main thread It couldn't be any quieter on the main thread if it's really really good There's just nothing going on there in a comfortable 60 fps 50 fps here because of the screen capturing So you'll notice that we're getting roughly 20 20 frames a second So this 50 frames a second is by design to be super clear We're capturing today at 15 frames a second not the usual 60 and you see that chromes adapted itself But as you can see there's loads of white space in between the frame bars So we could do a lot more work there's nothing there's nothing doing So that's really good I just wanted to kind of point that out before we get into doing the shadow stuff Right. So now we need a shadow now. I I'm going to switch back on the inert as well Just because I don't want to lose that I remember from my School lessons that the there's the thing called the umbra, which is the kind of the darker shadow underneath And there's the kind of softer shadow, which is the pen umbra. So we're going to have an umbra like so And we're going to have a pen umbra Like so now or as the Germans call it shatten and type shatten. There you go. You see I love it. I love it. I mean you were telling me what what did you think css would be called? If you were to translate css to german, I think it would be called Kaskadian des stilisierungs vor lang I think it's a brilliant word. I mean, that's just amazing I mean, I've got no chance of either remembering it or pronouncing it correctly But when I hear it, I mean, I'm just going to call it css So good, right, uh, what we need to do let's start with the uh, the umbra Let's see card umbra And we'll do the pen umbra as well a little a little bit sounds like a cocktail to me Does it Sounds like a shadow to me, um with a hundred percent height Height a hundred percent and then we'll do a background There we are It's a black background and we're going to say position absolute Top zero left Zero so the first question for me was going to be like why not just use box shadow Right. So yes, this is a fair question. So the box shadow is going to have give us a problem that um We will want to animate this shadow because the further it gets away from the background The more we want to have a blurry kind of shadow The problem with that is that you have to do that box shadow I have to create that box shadow on every frame and as we just shown We're currently not painting on every frame. All we're doing is just we're taking textures And we're moving them around and we don't want to repaint those textures changing box shadow will change those textures So we repaint on every frame and we would most likely be very much below our 60 or 50 fps. Exactly. So we don't want to do that. So um Okay So i'm wondering why my button has stopped working because I I didn't have buttons that worked before I know you made them display none and used the console Except that I Okay, I work right. So we've got these two um black background divs behind I'm going to set the pen umbra to display none for now. We're going to just work with the umbra for a second display display none, okay Okay, so we've got this this black background that's sitting underneath which doesn't look particularly good. Okay, I would ship it Yes And that's why I don't design. Yes um, right what we need to do is we need to do So box shadow No, we're not going to do that because that will cause a repaint. What we might want to do is we might think Ah, you know what I could do? I could do a box shadow here And this will be fine or what I'll actually do because I'm thinking really would be nice is we'll do a webkit blur Well, it's webkit filter in it. Yeah filter and then blur And then two pixels. So these are all the css filters. Let's css. Let's you apply Two elements so you can blur out things. You can invert things. I don't even know what the other svg Filters out that you can There's the cpu one is like There's a website out there that recreated all the instagram filters just with this attribute Which I thought was a really interesting thing. I've blurred it and I've transformed it down two pixels Okay, so it's kind of it looks like a kind of a box shadow kind of feeling thing there um But it's it's not really it's not really very nice because it's it's also a bit too dark So we'll bring the opacity down to say 0.3. Okay, so it gives us now you can see it. It's just there. I mean, maybe you have to kind of Um, look at it there. You see it when I when I did the animation. It's there. It's it's you know below the element Below the element. What we'll do inside our code here So we've actually we haven't got the umbra and the pen umbra picked out yet. So we're going to do that now Let's do that umbra Is the umbra and the pen umbra Is like so The question that we have is uh Will containment help with a painting lag? And I guess in this case it won't because we are not actually fighting against the bubbling of right We're not and we're actually what we're fighting against is what's known as the is a convolution Filter that we've got here blurs Require not looking when you're figuring out what the pixel should be you have to look At one that you have to look at and you have to inspect and so it makes it Proportional to the amount of blur that you've got so if you've got a blur of like 20 pixels that kernel around the pixel That one pixel that you're trying to is quite large and it depends on the algorithm averaging out the environment distribution which is the Gaussian distribution has the name Gaussian blur, but you You're doing that per frame per pixel of the shadow depending on how blurry you've decided to make it So this is a point at which even if you could contain everything else the sheer Computational cost of doing that paint work that blurring work that we just get to type one line of code Which is webkit filter blur two pixels or 12 pixels or 20 pixels But under the hood All the browsers are having to do all this maths to try and get to the actual blurriness And that stuff we kind of want to bake we don't want to be doing that on every single frame anyway Right, so I wanted to with my this shadow here I'm going to say animate And I'm going to do Umbra and I'll do timing So basically giving the same animation to the well, it will be Penumbra. Oh, yeah, I have to define what umbra and penumbra are and I'm just going to get rid of that for a second so Const the umbra or very similar animation. It's going to be very similar Here what we're actually going to do we're going to set for the umbra and the penumbra. We're actually going to set back face Visibility to visible we want to make sure that when the shadow flips over it's still actually there Because it's a shadow and we can do that kind of stuff So here what we're going to do is we're actually just going to go from with a transform again And what we want to do is we want to rotate Uh, you know, we want basically to rotate Zero degrees. I'm not even going to push it back or forwards. I don't think it's on the ground. It's on the ground It's basically yeah, so we're going to do that But what we're going to do is we're going to translate it down So we're going to start with a translate y of two two pixels So it's just a little bit below the card So it just feels like it's just a little bit there Rotated at zero degrees and then what we're going to do is we're going to That And we'll bring it down say 62 pixels and then back to two So it's going to come sliding down and then sliding back up and we're at a halfway point We're going to do it to 180 degrees That and we need our two offsets as well because we want it to kind of copy the behavior of the main card Yeah, it wouldn't be in sync would be weird without the offsets. Correct So hopefully we're going to see something that that slides down Rotates and slides back up again and that should in theory work for us Okay, let's try that see what we click before click For the people who've joined us welcome We're you're now seeing the the the first stage of what we're trying to pull which is a 3d flipping card Click it. Okay. Let's hoping it works. No, it didn't work. It actually it does work But it's just flipping the wrong way. It is actually pretty good. I like this because I didn't put in the actual axis I just said rotate when so it assumed I meant on the z axis actually So we'll do that. Let me let's try that again. There you okay now see now. We're talking We're actually getting a nice little thing going on there. Okay, and when we enable repaint flashing Yeah, okay when we enable repaint flashing flashing it's going to lie to us Okay, no, we've got I'll tell you I need so you would think this looks good I'm gonna I'm going to switch off the inert again just so that we get to see that and we will get some from the box Yeah, so let me just switch off the boxes again For just so that we can see this but then we can talk about why this isn't actually as good as it appears Okay I'm gonna actually select that element first and see card console Okay, so this is pretty much what we saw before there we are No, now we have a flipping card with a shadow which Is great. This is fine But we can make it even better and I think what we'll do is just temporarily we will add it will do our pen umbra now Um, so I'll do the pen umbra stuff which is going to require so we can get rid of this particular code And we will do this Bring this across and we're going to start it off at zero and we're going to blur it up to 12 pixels Okay And over here the pen umbra will take this little chunk here call this pen umbra Pen umbra and What we're going to do is we're going to do the exactly the same animation now What we can also do is we're starting at an opacity of 0.3 here, but we're going to I'll make this down to zero I'm doing this. I want to do in 0.0. So the indentation stays the same or the distance because I find that easier to read I'm going to fade that out the umbra out, but we're going to fade in the pen umbra Which is so it's not technically correct But it kind of should work for us and I'm going to go from zero as we said if it looks right it is right Okay, so this Is the pen umbra we're trying to emulate here is that when you have light source and something going towards the light source The the diffusion of the shadow is gonna get bigger and what we're trying to do is we're just we're just fading between two Between something with a two pixel blur and a 12 pixel blur and I've slowed the animation right down now So hopefully um, let me just switch off the pen flashing a sec. See if it's actually visually correct first Or at least kind of visually correct Gotta do all my button unhiding stuff That's my fault in it. I keep forgetting that I'm doing that. Okay So you see how we get that crossfade between the two edges of the shadow It becomes more blurry the further the card lifts up and it's exactly the effect that we're looking for Let's slow it down even more just so it's really obvious so again that across to that blurrier version and then Back into the the sharper version as we go but down the eye will notice that even when the animation is fast The the human eye will notice it. Hopefully as well with the paint flashing We're gonna see Come on paul you can do it You have to actually look there. Yeah Okay with the paint flashing we're in a pretty good Spot Okay, we're doing pretty well here. Now. This is the bit where I having done all that work I'm about to tell you that this is uh, not actually very good. Let me show you Why that is well, I'm not going to be that easy to show you why that is Other than I'm going to have to Let's see if we can least figure something out the cpu throttling there. Okay, so let's try and see what we get so rendering Let's try this. Let's see what happens. Okay, so we're going to do our animation like so now we're on a fast desktop machine Hopefully down here somewhere You can see the amount of time on the gpu is actually Occasionally quite hefty That is a good amount of time for a machine this powerful Yes, and the reason it's it's taking this long sometimes and and this is going to be worse on something That doesn't have a meaty gpu like a phone The the webkit filters are done later on in the pipeline So we talked earlier about the fact that we're kind of baking these textures and these textures actually get sent over to the Gpu and then they get basically put into boxes and moved around the screen and that's what the transforms do It's just moving those boxes around When you apply a webkit filter We take those textures at the end of the pipeline and we do something like a blur to them So that blur is actually happening gpu side But it means that we can't do any other instructions to the gpu like keep this animation going because it's going Well, I'm busy doing that blur that you just asked me to do So we need to find another way to basically do this this blurring As I say, if you would you have to trust me If I do maybe even a low-end device just see if it if it'll do it As I'm presuming this is not really cpu bound. So we might not see it here. I mean it still looks good Yeah, it still looks okay It's it is it's something as soon as I did it on and checked it on my phone This effect. I was like, yeah, this isn't good. So, okay, okay Let's jump to what we can actually do instead What we can actually do instead is we want to bake something with a texture now We could go 1998 style as you referred to it the other day and we could make pings We could actually make a graphic Of a blurred what basically pre-computer blur put it in an image format that has capabilities for transparency because we need them for the edges And we could use that but, you know, we also live in the time of Responsiveness. Yeah, different screen sizes. So how are we going to do that? Well, I mean there are options You could use a border image and so on true that is going to work for you What we've chosen to do today is actually to use svg Because svg supports Gaussian blur and if we were to set the those Pen umbra divs to use these svg files As their background Those will get kind of baked as a texture and then we will get exactly the same effect We won't have the blur in the css. We're using the same process. We are blurring a black square Right, but we're using it at different points in the pipeline. Exactly. So let me just show you what one of these Actually looks like so Before we start everyone we have an interesting question. I thought how is the flipping element affecting its surrounding elements? It won't That is the beauty of transforms transforms don't change the actual layout position if you see what I mean They're not they're not moving. They just are they look like they are if that makes sense So we layout every each browser layouts all the browser layout their elements and then the transforms get applied purely on a Post-effect basis. Yeah So if you say scale it will get the the image has been rendered already will get scaled Yeah, and then they might get repainted at the end. This is a true. Sorry. Yeah It's a key pointer though Sometimes if you do a scale at the end of the scale the browser will go Well, now I need to kind of make that image bigger for example, so it doesn't look blurry So there is some smartness here, but in this particular situation We should be fine So umbra and our pen umbra you can see what that looks like and I'm going to open that in Reveal and find it and then I was going to drag that all the way down here Into canary. So this is what it looks like. This is pretty much the same thing. We actually got from the Uh the css blur filter So let's see how we get on with that. What we're going to do though is we're going to switch across So we need to go back to our css and we are going to get rid of Uh the background There we don't want that and we don't want the blurs. We definitely don't want those But everything else can actually stay the same for now ish What we're going to do is we're going to say background URL And we're going to say images and this one is the umbra dot svg downside Center center No repeat. Okay. I'm going to say the same for the pen umbra Shouldn't it also be a contain? Uh, well, I mean, this is the thing at the moment. They're set to a hundred percent width and height They don't want to actually be set to a hundred percent width and height. Again, I'm I've hard coded these values You can do this in a responsive manner, but we'll just do it like the hard coded version today just to You know get us through So the actual width of the umbra In the svg is 270 by 390 So all those will go back and we'll set this to width 270 pixels Height do I say 390? I think I did 390 the side which is probably interesting to you We called the card flip, but shouldn't shouldn't we be using flip? We don't need to um, so Flip is a really good uh technique when you don't know the transforms ahead of time Exactly We've been able to hard code these transform because we know the card is going from one side and it's rotating 180 degrees So we know from zero degrees to 180 if it changes size and we don't know the size of the screen Or anything like that would be would get involved. That's the second flip comes in Yeah, when you don't know the transforms ahead of time, you would use a technique like flip We know those ahead of time So we shouldn't try and make it more complicated than you know, then it needs to be so that's 270 by 390 now the problem there is that the card itself is 260 by 380 Which means we have to position this top and left by five pixels minus five pixels top minus five pixels left minus five pixels And that will now position that correctly Same is going to hold true for the pen umbrella except that it's going to be even bigger. It's 330 by 450 position relative or something No, we are position absolute So 330 by 450 and so it was what was it 260 So that is 70 which is 35 pixels. So we've minus 35 pixels. I think in both directions all being Wow Cool, I trust you. All right. I say that So all being well now um If that works There we go. We actually have it doesn't look visually any different Um, but the umbra is backed by this svg And the pen umbra is backed by this svg over here And i'm going to switch back on my inert as well so that I don't forget to do that And basically Just record Yeah, I'll do it. I'll do it at slow speed just so that there are plenty of frames to go up There you go Still completely quiet totally quiet Nothing doing Now it will also work on a device that doesn't have doesn't have a gp Gpu exactly this this will work everywhere the only other Last couple of bits and pieces that I'd like to do for a little bit of tidy nurses sake is we flip the The side immediately, but we really probably only want to do that at the end of the animation So what we can do here is we can do an on finish. So this returns something I believe in the future this will start to return a promise but for today They are reworking the API on there. Yeah on finish equals and then it's a function We're And we could bounce this out to its own on finish But oh, we don't think we need to and the other thing I think I'd probably want to do This dot locked. I think I want to lock it while we're in the middle of the flipping over animation. So this locked is false And it's when it's there when it's finishing it's also unlocked And then the start of the flipping animation So this would basically prevent users that are just violently clicking. Yeah, multiple animations at the same time You know, you could figure out ways. I'm sure if it's locked We're just going to return early so that we don't do that. So you can't basically, you know Cause this to go lots and lots of times and we just speed it up. Actually, no, let me just check it actually works so That with a zero go to the console So we select the card and we can say flip And if I see no, you see that's that's still broken. So all being well It's now ignoring me until it reaches the other side and at the end of the animation It should unlock so that we can now call flip again and it will go back over. So we're actually sort of protecting ourselves from That kind of brokenness that we just saw there Something I always forget in the first iteration of my code and then I wonder why people start using it I'm saying it's broken This violently clicking users always breaking my stuff Okay, so there we are you see We have a flippable 3d flippable card Why don't we just for it for because I think we have a few minutes left Let's do axis equals I'm going to do random, but let's let's see what we get here Because this this should work in fact, let me yeah, let's do this. Let's do it this way When we and we need to do the attribute updated callback So after this, I will actually add some of that code back in but we can say this dot axis equals this dot get attribute attribute axis or Default it to the x axis for example. Okay. I I'm assuming you're going to define how the card flips Yeah, and we're gonna say if the axis equals Let me do it to uppercase. I suppose to uppercase equals Random we'll just choose one at random So this dot axis equals math dot random is greater than 0.5 We'll do the y axis. Otherwise, we'll do the x axis. Okay So you might be wondering what is he doing here? Well, we've we've chosen at this point to always do Rotate y well, we can just select all these now. Well, no, I'll take what we do full rotate y. There we are La la la la la There we go and we'll do This dot axis and for these that these ones here where we didn't actually have them set We're gonna have to yeah, I was wondering if that was going to happen sometimes When you do the multi Quotes multi colors things in VS code are a little bit iffy in my experience and can be yeah So sometimes you get this kind of situation where you have to do a little bit of tidy up. Yeah, but all the same Because I set it to random Hopefully see There you go. We've got it. We've got we've got one that flips an x here If I refresh we've got one that flips in y It's almost like it decided to help me out there and didn't do like 10 in a row in x So there you go done that now you see that code just works there for whatever axis we want and we could change the perspective We can change the we can figure out give it more actually was like how far should the card lift up Yeah, all these kind of things the custom elements duration power Yeah duration, you know, we've hard coded the duration to be what it is We can let's just let why not let's just do that. Let's just do this let this dot duration We have the time I think Hope everybody's enjoying this. Thank you so much for joining us It's lovely to have you all here I'm going to say pause int That Axis is going to be Duration no, that one shouldn't be that should remain as this axis. So we're going to ask for the duration attribute And oh, that's not going to If Is none this dot duration This dot duration equals whenever you're handling user input and attributes are in this case user input Validated. Yeah, absolutely golden rule Um, so we're going to basically ask for the duration attribute or we're going to default it to 800 and So we can do that this now duration Equals 3000 so now we should have a three second card flip In a random axis that felt like three seconds. There you go. Well done paul. There you go So thank you so much for everybody. It's everybody who's tuned in live Obviously if you're watching this, uh, you know on demand as it were welcome I hope you've enjoyed this if you just know it you're too late Yeah, yeah, yeah next time. It's it's normally utc plus one at two o'clock if you didn't know that we're going to be live Subscribe to this youtube channel. Follow us on twitter. We we announced this ahead of time and a few minutes before we go live So no excuse next time okay, um The code will go up and to get up as soon as humanly possible. Um once I've had a little bit of a Additional tidy up and I guess we will catch you next time. See ya