3D Card Flip: Live Code Session - Supercharged

Key Takeaways

hello and welcome to the supercharged live stream I'm Paul and I'm sorry sirma tell me what is better than two dimensions four let's make a 3D card flip [Music] 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 uh in there on the chat we've got people from Austria Costa Rica and Netherlands everyone hey welcome ah thank you I'm going to be monitoring the chat uh so keep talking I'm just gonna try to keep up and if you have any questions post them there I'll weave in 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 a bit of HTML um let's see what we'll do is we'll drop in a title and swoosh or call the card flip let's call it 3D card flick whatever 3D carpet all right let's get some Styles in there so we'll need to link Rel equals style sheet href you have to fix the indentation on the title I know I was gonna I was gonna okay no you're struggling there you go you fixed it for you okay so much better already files.css find gonna go with that today all right styles styles.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 Material design and that is correct it is it is not because we just do what we do whatever 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 clipping stuff and there is going to be some I think really really interesting bits and pieces in today because when you're talking about 3D you actually have to do a little bit of a little bit of figuring stuff we're going to use CSS transforms or opengl um anyway what just hey 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 100 because there's nothing like you did some excessive typing just I did do it so a lot 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 um so I do that apparently anyway right let's make a a let's see SC card let's just go with SD card today why not we also have the question is this real life yes yes it is it is very well as in are we doing this for real live yes we are yeah it's really life like as I said keep posting questions ask them in the chat or on Twitter um and we can answer them for you live that's how it works yeah all right let's let's dive into some action yeah I'm doing that I'm doing that I've already got so I've got a customer I'm gonna do it today I'm going to call it SE card um 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 I'm gonna 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 and then you don't have to do it this way there's loads of ways to do it and just do class equals back and I have sort of thought ahead a little bit here um dare you I know and we actually I made this little little thing for the back of the card it's a little super jump yes little supercharged graphic there for us to yeah I know I wish I had hair so it's fair or something in common I guess would change hair if possible there you are right so uh front of card back of card I'm gonna what I'm gonna do I'm just going to temporarily just pop a button on here um and we'll say flip card so that's fine it's not gonna look great um but we'll just put it there for now right so we've actually got some markup uh let's go ahead and so I guess drop some in case someone doesn't really know what a 3D cartoon is we're just starting with front and back what we're doing is we're going to have the card like you might actually know from Material design and I guess this is why people thought of material design yeah announce this and we're gonna flip it over in 3D yeah so it's going to come out of the screen going to flip over and then drop back onto the screen and we're gonna have to do some work with like faking 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 once the two classes we will work our way from there so we're gonna have to do a little bit of styling to get this underway though body uh let's say uh width 100 in fact I'm gonna have to do that in the HTML as well whatever's right do that and then I'm going to say that the HTML is going to be display Flex today and it's going to be it doesn't actually matter we can do Xbox hotness align item Center and then justify content Center I think that does it although SC card and I'm gonna go because I've already got this image so I'm going to make my card what is this it's 260 by 380. so I'm going to say my card today is with 260. um for what it's worth I have um done this kind of approach before and you can make the cards responsive so I am hard coding these uh 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 it obvious that this is not production ready code let's claim that we're probably going to repeat in all future episodes as well yeah um 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 you know do some testing and other other browsers as well which we're not going to do today correct so what we're going to do is um there's the one of the first things that we're going to see here um about 100 right so we've got the front and the back so what I've said is the the containing element the car position relative set its width and height then the actual front and back I've said backface visibility to Hidden because as we flip the the parts the front and the back of the card over we want that to um we want the contents to disappear as it's flipped okay and by default I don't think backface visibility is set to anything other than visible so we want it to be backface 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 be dependent of where they are so it means we just see the top cut the top half of the card but rendered backwards yeah which is not what we want so that's why we set it to him 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 um let's do that let's make it a little bit um 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 uh background what do we got uh let's do it 444 color uh and I'm also going to set um 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 why is it so tiny that's a good question I think it's because of the um the the way that this screen is set up so that they can do the live streamy stuff 16x9 I obviously know loads about live streaming as we have seen the promo you did turn on the camera successfully but that's about it oh good right um so what have 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 uh where do you think what you're about to write the flipping card is a reasonable or even a good choice in terms of ux 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 with like an actual flip card when you do like um a flash cards I think you call them and 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 uh the y-axis so we're going to flip around the line down the middle so the car's going to come forward flip around it's it's vertical axis and then 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 its the back face of the the card hidden it's still there but we won't see it so we're doing really well um let's add on let me see uh tell you what we'll do is we'll make that an H1 as well like so and let's just change the font firmly because it's currently not very nice and see what we've got for Ariel that'll do it and that's still quite monstrously large so yeah that'll probably do it I'll probably do it um for now let's just change okay but hack this in today font size 24 pixels just do a bit on my side this this flip card I'm going to fix this now as well while we're here um what I want is I want buttons on the front and the back um for flipping the cards just so that there's a button that covers the whole thing loads of ways you could do this um front and back and oh oh while we're here let's put on a border radius of 3 pixels again just so that we're seeing a little bit of roundingness on the corner just so it feels more like a card so the front and the back uh 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 which I got a question um did we consider using the animation API instead of Seattle 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 haha I was saving that and you've just come storming in Via serma and yeah she's gonna blame me afterwards oh yeah I'm totally good I'm going to take them not even afterwards right now his fault there you go uh yeah absolutely we are going to go down that path you can do it with uh keyframed animations um I actually found that when I've been doing stuff like this uh the web animations API is brilliant for this um it's support is actually really not good um by default so you actually have to look at the 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 the approach but I think it is possible to do this with keyframes just as well uh but you know we like the bleeding edge we want to teach new things here so I want to go there background none border none and text indent minus 10 000 pixels for now okay so we actually have we have a button there on the front and the back so this is good now we can actually get into some JavaScript and let's do a custom element so we're going to do SC flip card and I call the 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 in the back so I know we're probably going to have to enumerate that at some point so let's just do that now with the getter sides return front one back two so that's one thing and we know when we create it that we're showing the front of the card so we can say this side equals this dot sides in fact if I did static static there we are can do that dot side 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 and the back so we've got front equals document dot 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 going to do is we're going to create a flip function and the reason we're going to 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 will just get them to that is the mindset of custom elements right and then you expose the functions that are supposed explicitly yeah so our card is 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 um can you you can do for each can't you on on a node list now I'll do a write-up from this dot button wow buttons it's an interesting remark I think uh you did document query selector but since you have all the sides of the card as shown you could use this query selection and not Traverse the entire document oh yeah no no they're quite right I actually I I fully intended to do that and I just it was a a brain problem moment for me there where I just didn't get it quite right so thank you yeah but the people who just or maybe joined us just now uh welcome this is supercharged we are 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 back side and that is actually pretty unusual on the web which is why it's gonna be interesting and we're going to be using the web animations API we're going to be using uh lots of CSS and javascripts and custom elements so if you're using that join us and and watch Paul make mistakes yay all right so we're gonna do um so what I've got here is I'm just um kind of stepping through the buttons and just saying when you um you know when we click on a button we want to call the flip code which is going to be this here um so let me just uh drop a debugger statements in there so that when we click we know that that's doing its job um 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 um do we have any attached and detached actually do you know what I should be doing that in here probably yeah so I uh these are the kind of things that I never can quite remember if you can attach a event listener before you attach it to the Dom and then well it worked but I think for cleanliness sake you'd normally want to do um this kind of sort of attaching and detaching is the point where you can put on the listeners and take them off probably um so I mean I'll put it there for now and I should have a corresponding detached but I'm going to 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 uh so let's do this const side one equals and this is this is the uh where the fun stuff is about to happen because we have to first of all all right put it this way um 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 you measure perspective in pixels which is this kind of virtual camera yeah yeah how much time have you spent looking at this um 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 a perspective of 500 pixels basically um one way to 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 isometric it almost looks like yeah almost more distant yeah basically it's to do with how much um when something's rotated and the size that it is um how much it's going to get shrunk or or some stretched by basically kind of a small perspective while you get this fisheye look right yeah you just get more extreme 3D motion and 500 pixels is tip typically 500 to 1000 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 they're just explain to me why these numbers are good and it's because it will be dependent on how far back you push the thing and how how big the thing is that you're pushing as well in in the Zed space so because they're 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 Z space because what we're going to do is we're going to 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 is fine the code is going to be on GitHub later on our uh UI element samples repository we're going to 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 going to be the one that we flip as in the one that is at the front of that particular moment is the one that we actually have to work with um 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 I'm gonna have a transform now the transform is going to start at we're going to say we're going to translate whichever it is translate translate z z I'm going to start with minus 200 pixels so I'm going to push it back in 200 pixels it's going to have a rotation of 0 degrees okay so it's it's basically pushed back in Z and it's got zero degrees so it's not rotated at all the problem is right now um 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 transition from one element to the next yeah we're gonna we're definitely going to cover all that but 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 yeah 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.71 blah blah that's not going to work for us what we actually want it to do is we want it to appear as it was originally so do you know how you calculate sir the scale factor that you require no I wondered if you would because I I I I I could probably I 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 and I did not know yeah if you and if you read through it will tell you and I thought well they have to do like the camera angle I know it's the scale value that you require is uh it will be it's the perspective so in this case it'll be 500 over and then 500 minus whatever the distance would be minus 200 which is just plus 200 right so 500 over that that's how far 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 0.71 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 1.4 scaled up to to kind of reverse it which content 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'd probably want to make this totally Dynamic but we can say oh we can trans transfer that across to a template string 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 100 pixels we don't want to bring up to zero because half of the card will disappear when we rotate it we want to leave enough space for it flipping is 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 the so 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 keyframes of our animation does that make sense is everybody happy so far on the live stream is everybody not terrified of that I don't think they will be they're a spark bunch right so good so far yeah 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 around 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 saunt us now what we can do is we can switch based on what the current side is so case is that it's flipcard.sides dot front so if you're if this is the front card we're going to say uh this dot front dot animate and we're going to give it the side one and we're gonna have to make some timing um data in a second whoops so Daisy 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 uh also let's create it um default because it's probably going to want that we can throw a new error well if that happened something really did yeah unknown side is where I'm going it's like the good old days when you have enums and suddenly yeah something goes really really very strangely wrong uh so we need to do the back so it's the back of the card we're going to do uh side two there and side one okay so this we just now need some timing information here why oh it doesn't doesn't like it because I'm throwing there you go so timing const timing is an object and we're going to say duration and we'll do it slowly at first we'll do it for like 3000 so that's three seconds iterations we'll see look at it one easing we need some of that 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 to 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 forever than 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 until 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 um and so what we're going to do is I'm just going to remove that transform that I put there okay all being well it goes up flips goes back look at that we actually have now a card flip now I don't like the timing of it um 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 spent in lifting up and down and the flip itself is 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 has 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 come on coming up forward is actually going to happen faster get into the flip and then get and then come back down slower so what we can do here is um we normally do an offset um inside the object and you put in a value between zero and one and so 0.15 it's going to basically normally if you don't put it it'll be zero 0.25 uh 0.5 and 0.75 oh no whatever no it wouldn't it 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 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 0.15 for when it's coming forward I'm going to set it to say offset 0.65 here for when we are at the uh 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 just a touch slower let's see how that looks yeah so that comes up quickly you good yeah multitask right how's it going in there uh we got uh some questions and people sharing links answering questions for me already which is amazing thanks for everybody who's helping out um looking good yeah really good um so what I've done is just by um finish it finished typing then I can talk to you dude sorry are you good no you good you 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 kind of lifting up faster other things in the array keep the same default also the last one is still zero points oh you have to change so yeah I've changed these so it's basically this is this is happening what the card's coming forward by 0.15 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 uh like we had it before from 0.65 to one so coming forward is 0.15 and it gets 0.35 to push back so the slow down at the end is more strongly felt though okay okay but if you hadn't passed in the 0.65 it would have still had the default value of it divided the available time should be 0.85 between these two okay frames which you can play with these numbers and just try and get different feels um 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 to build for es6 we use nothing we currently do not uh we use everything that is available in the current Chrome stable I think you are yeah I'm actually running in Canary today but yeah Chrome stable I believe has uh all of these all the same things um if and one of the things we say on the repo is that if you're planning to use this code or something like it you'd obviously need to transpile it or do something with it um but our goal here is is partly to sort of show some of these new things and it's partly to um you know choose the kind of correct thing that we think for the the job that we're doing in which case this is actually a really good use for web animations and it's a really good use for custom elements so we're kind of taking advantage of both of those uh but in a production setting as someone said right at the start you probably have to do some yeah dancing uh to make and 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 uh the thing is at the moment it when we click it the second time it goes back to the first side so for the for a temporary and we'll come back to this I'm just going to set the side um to so if this side is currently uh SC flipkart.sides dot front if it's were if it's the front of the card that we've seen then the side is now going to be uh that dot sides dot back otherwise it's gonna be front again so this I love these bit of Expressions they always feel so redundant so yeah so now we now we can basically you can see how we're actually card flipping we already are have a pretty pretty thing going on this is really good fun it's so much fun to keep stuffing that I want to do it it actually works it doesn't do it it does work amazing now here's here's something that if you've not seen um Rob dodson's alley casts yet uh it's a brilliant show very new on the channel and one of the things he talked about in I think uh the first proper episode was the inert property uh which basically at the moment these two buttons uh for flipping the card both sides of the card you've only seen one one at once right and so you want to be able to kind of say to whichever one's the back side of the card you shouldn't be tabable right now you should 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 uh document DOT active element so uh this is not going to help you can yeah do that 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 he would hear things that are not even there exactly we want to kind of we want to handle that so inert is a thing there's a there's a polyfill I've I've gone ahead and actually uh 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 people are being snarky about you using an email not just a Boolean for which side is yeah okay and fair enough they I mean I mean technically this could be is the more extensible Expo approach where you want to have a flippable cube at some point or something yeah oh he knows who knows definitely valid point we could have used the we're gonna have all this logic b a little bit simpler but in this case I guess it's more explicit and more extensible yeah you could and and I actually like the readability of saying this is the front side it's the back side um but you could you're right if it was a billion then we could say this side is not this side um which would flip that immediately and that would also be perfectly a reasonable thing to do so I'm going to start by saying this dot back dot inert because I've added in the inert polyfill it's true and the front uh it's just to slap ourselves on the back the thing that Rob Dodson fixed with his inert polyfill in that Alley cast video was our site nav one of our very first lights normally slapping ourselves On The Backs which is actually having our work correct I tried to frame it nicely here let's just make it sound good but yeah you fix our side nav which was in terms of accessibility not good so we're going to say the front is is not in there at the back is inert uh 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 hey sorry the front is not in there and the back is so you know again you know you probably could tidy this code up and it is very repetitive so there is there would be ways to to resolve this I'm sure um but it does mean that we uh have that blah um 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 element so it's basically toggling the availability of those elements very easily for us it's a brilliant little thing uh is the inert um 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 um is we'd want to say this dot back dot Focus we want to actually make sure that we've focused the the correct part of the card because you know I think you switch those the wrong way around I know if you're in the back so we're bringing you back to the uh in order for that to work we actually have to set a tab index uh to minus one so it's not naturally tabable but it needs a tab index in order for Focus to work if you didn't understand it watch Rob Dotson's episode yeah and also there's um there's a Udacity course as well so that's well worth taking uh 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 going to 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 we want to see the laggy version first okay well it's gonna be hard to do the laggy version without a phone but I will I'll code 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 Canary we now have landed CPU throttling okay that might do it might do enough we'll do we'll do a timer in fact actually well before we even get into that let me show you this um 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 we see some paint flashing here okay because of the button okay but other than that the cards itself they're not actually there's an initial paint and then the entire animation yeah finishes without a repaint which is good which is what they want and if we so for the other thing is if we did um document dot right if I see 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 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 so 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 rasterized onto the background but once animation starts it gets its own layer so it has to repaint once well interestingly we are still seeing I'm still saying this where it is it is still painting so there's a bit of a mystery there for me huh um I have a a Wonder just let me just set the the buttons to display non see if that depends about that's 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 nuts 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 I'll put the inert stuff back on because I still think it's worth having and I still think we'll we'll get away with it I don't think it'll 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 so 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 now 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 a well-known optimization I suppose that Chrome does when something stops being backface visibility hidden doesn't it 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 uh 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 it looks really really good there's just nothing going on there in a comfortable 60fps 50 FPS here because of the screen capturing so you'll notice that we're getting roughly 20 20 seconds 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 can see that Chrome's adapted itself 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 a frame there's nothing there's nothing doing so that's really good so 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 am 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 they 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 penumbra so we're going to have an umbra like so and we're gonna have a pen Umbra like so now or as the Germans call it chattan 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 Cascade which I think it's a brilliant word I mean that's just the main I mean I've got no chance of either remembering it or pronouncing it correctly but when I hear it I just I mean I'm just gonna call it CSS so good right uh what we need to do let's start with the uh the Ombre let's SC card Umbra and we'll do the pen number as well a little a little bit it sounds like a cocktail to me sounds like a shadow to me um with 100 height 100 height 100 and then we'll do uh background uh and we're going to say position absolute top zero left zero so the first question from you was going to be like why not just use box Shadow right so yes there's 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've 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'll 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 did have buttons that worked before so I know you made them display none and use the console except the idea and the display now there we are okay I work right so we've got these two um black background divs behind I'm going to set the penumbra to display non-fin now we're going to work with the Umbra for a second display display none okay Okay so we've got this this bike background that's sitting underneath which doesn't look particularly good okay I will chip it yes and that's why I don't design yes um right what we need to do uh is we need to do uh so box Shadow no we're not going to do that because that will cause replay 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 would 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 isn't it yeah a filter and then blur and then two pixels so these are all the CSS filters that's CSS lets you apply two elements so you can blur out things you can invert things I don't even know what the other SVG filters are that you can um there's the CPU one there's like yeah 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 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 bring the opacity down to say 0.3 okay so it gives us now you can see it's just there you maybe have to kind of um look at it then you see it when I when I do the animation it's there it's it's it's you know below the elements below the element what we'll do inside our code here so we've actually we haven't got the Umbra and the penumbra picked out yet so we're going to do that now let's do that um Umbra is the Umbra and the pen Umbra is like so yeah the question that we have is uh will containment help with the 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 it's a convolution uh filter that we've got here blurs uh require not looking when you're figuring out what the pixel should be you have to look at that 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 to the environment the distribution which is the gaussian distribution that's 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 2 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 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 uh Umbra and then do timing and um so basically giving the same animation to the well it will be um penumbra oh yeah I have to Define what Umbra and penumbra are and I'm just gonna get rid of that for a second so const the Umbra or a very similar animation it's going to be very similar um 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 um 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 now what we want to do is we want to rotate uh yeah we want basically to rotate zero degrees I'm not even going to push it back or forwards because it's on the ground it's on the ground it's basically yeah so I'm 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 the 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 rotated at zero degrees and then what we're going to do is we're going to no no no 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 halfway point I'm going to do it to 180 degrees get rid of 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 it 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 before click for the people who've joined us welcome we're you're now seeing the the first stage of what we're trying new build 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 because I didn't put in the actual axis I just said rotate when sorry it assumed I meant on the Z axis actually so do that there we are 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 fashion flashing it's going to lie to us so you would think this looks good I'm gonna I'm gonna 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 and then we can talk about why this isn't actually as good as it appears okay oh I'm gonna actually select that element first SC card console okay so this is pretty much what we saw before there we are no now we have a flipping card with the shadow which it's great this is fine but we can make it even better and I think what we'll do is just temporarily we will add we'll do our penumbra now um so I'll do the penumbra 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 penumbra we'll take this little chunk here call this penumbra penumbra 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 animate this down to zero I'm doing this I'm only doing 0.0 so the indentation stays the same all 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 penumbra which is so it's not technically correct but it kinda 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 number what 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 shadows 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 paint flashing a sec see if it's actually visually correct first or at least kind of visually correct yeah I've got to do all my button unhiding stuff that's my fault and I keep forgetting that I'm doing that okay so you see how we get that Crossfade between the edges of the Shadow it becomes more blurry with the further the card lifts up let's look exactly the effect that we're looking for let's slow 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 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 um we're gonna see come on Paul you can do it you have to actually select oh yeah okay with the paint flashing we're in a pretty good spot okay we're doing pretty well here now this is a 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 uh let's see if we can at 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 that's powerful yes and the reason it is 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 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 dpu side but we 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 um 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 we might not see it here yeah 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 uh 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 uh of a blurred but basically pre-compute the blur put it in an image from it 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 uh responsiveness yeah different screen sizes so how are we going to do that well I mean you there are options uh you could use say border image and so on true that is going to work for you um 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 penumbra divs to use these SVG files how's their background um 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 series so 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 uh actually looks like so before we start in front if you have an interesting question I thought how is the flipping element affecting its surrounding elements it won't it's your 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 lay out each browser layouts all the browsers lay out 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 is 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 um we should be fine uh so our Umbra and our penumbra you can see what that looks like I'm going to open that in review 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 in 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 background there we don't want that 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 uh 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 what this is the thing at the moment they're set to 100 width and height they don't want to actually be set to 100 width and height again 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 um so the actual width of the Umbra in the SVG is 270 by 390. so what we'll do is we'll go back and we'll set this to width 270 pixels height did I say 390 I think I did three one to the side which is probably interesting to you we call 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 Transformers because we know the card is going from one side and it's rotating 180 degrees 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 it 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 than 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 penumbra except that it's going to be even bigger it's 330 by 14th position relative or something no we are position absolute uh so 330 by 450 and so it was what was it 260 so that is 70 which is 35 pixels so we minus 35 pixels I think in both directions all being well 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 penumbra 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 I will yeah I'll do it I'll do it at slow speed just so that there are plenty of frames to go up um there you go still completely quiet totally quiet nothing doing it's dead faster now it will also work on a device that hasn't had doesn't have a GP the beefy GPU exactly this this will work uh everywhere the only other last couple of bits and pieces that I'd like to do for a little bit of tidiness is sake is we flip the um 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 yeah on finish equals and then it's a function and we could bounce this out to its own on finish but I 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 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 at the start of the flipping animation um 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 but obviously no let me just check it actually works so that with a zero go to the console so we'll select the card and we can say flip and if I alright so you know 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 um why don't we just for it for because I think we have a few minutes left um let's do axis equals I'm going to do random but let's let's see what we get here um because this this should work in fact let me yeah let's do this let's do it this way um 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 um 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 it and we're going to say if the axis equals and we'll do it to uppercase I suppose two uppercase equals random we'll just choose one at random so this dot axis equals math.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 tell you what we do full rotate y there we are there we go and we'll do this dot axis and for these these ones here where we didn't actually have them set we're going to have to yeah I was wondering if that was going to happen sometimes when you do the multi quotes multicolas things in vs code are a little bit iffy in my experience in Canberra 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've set it to random hopefully see there you go we got it we got we got one that flips an X here and if I re 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 that 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 accurate like how far should the card lift up yeah all these other things the custom elements duration power yeah duration we know we've hard-coded the duration to be what it is we can let's just like why not let's just do that let's just do this let's this dot duration we have the time I think I hope everybody's enjoying this thank you so much for joining us um it's lovely to have you all here I'm going to say uh pars int that this instead of axis is going to be uh duration no that one shouldn't be that should remain as this that axis so we're going to ask for the duration attribute and oh that's not got a uh if is none this dot duration this stop duration equals whenever you're handling user input and attributes are in this case user input yeah 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 three thousand so now we should have a three second card flip in a random access that felt like three seconds there you go well done Paul there you go so thank you so much for everybody to 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 joined you're too late yeah yeah yeah yeah no 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 open to get up as soon as humanly possible um once I've had a little bit of a an additional tidy up and I guess we will catch you next time see ya