 I have the taste of onion in my mouth, but I'm not sad about I'm just it's a good taste hyper aware of it Okay, I can't smell onions. That's fine. It's just about far enough away still Yes, we're getting closer and closer every time we film. Yeah, and in the next batch. We'll just be On each other's shoulders. Yep Balance it's gonna be a circus act So so Here's what I want to talk about CSS easing. It's a thing with this easing functions in CSS. Here they are. That's one look at that. Oh There we go, all of those are CSS eases that you can do Are they all the the the ones that have a Keyword name or did you do some custom easing did some custom easing on them? but You can't do stuff like this true or this true. That's a problem. Just don't do it. No, it's nice though Why wouldn't you want to do that all over your web page? Well, I think Safari still has the the right one, which is their dash k dash spring. Yes, they do have a spring function But let's have a look at these ones. So this is this is the kind of way that we define These things. Yeah, as you say, we have key words, but they all map to that just an alias for yes Cubic bezier. Is it bezier? Is it busy? Is it I don't know? QB QBB QB But yeah, so this is this is all of those easings can be defined in this syntax We call them easy like they used to be called timing functions Mm-hmm, which you still see around in CSS, but they're now just called easing functions because the idea is We might get to use them for things other than animations at some point. Yeah, like a gradient for example, for example, yeah So here's how this works This is a linear one And this looks like this as in as the input increases the output is time It's between zero and one the progress and the output is between zero progress and you can yes And with linear it's just takes the input as the out with animations There is progress on the time axis. I mean with gradients. It would be a spatial progress. How much for exactly? But yes, so zero one start to finish. Yes, it maps to that's that's better said than what I was waffling. Thank you But we can do this And so the red numbers there is x and y coordinates They've drawn that and the green is the x and y coordinates of the other part of them for the hand of the curve And what this means is it'll do this Yeah, you can see because the curve at the top it sort of eased in Well sort of eased out, I guess, but there's a little bit of an ease in as well We've all played these handles and like inkscape or something when we do the curves, which same thing, right exactly Yes, this is this is you know a fundamental of drawing a two-dimensional line. Yeah But you can do it too. Yeah, you can get a fair bit of freedom in terms of what you can do There's one that overshoots Even that is possible But what is not possible Is this? Which is it? That's true about the easing. Yeah, that need more than one handle for that. Exactly two So as I think about like how can we get there? How can we make this happen on the web? Just add my handles Add more and more handles as well hold on to the idea because they people have been thinking about this for some time Since Rachel neighbors in 2016 in 2016 and we still don't have a solution yet I think I think we're getting close Ways of solving this Like you say add more add more handles, right? That that's a that's a way a lot of people think about it. They why not? You know, we have ways of defining Shapes 2d shapes Circle in there. Why not? Well, there's one right like that's your that is a definition right of that line You saw before this is the SPG line definition true But it is not just a line in it. It's a function which There's constraints Exactly. So whereas like this does make sense If you can have a path syntax you could also do this Cool, what would it look like? Well, exactly It doesn't make sense because you end up with like a single input having many outputs And what does that mean? It's meaningless in the situation clone multiple items. Yeah Well, exactly But that's that and that's the problem is like it's trying to map a two-dimensional system So what is fundamentally a one-dimensional? Like as you say, it's a function. There's an input and there's an output Yeah, so this this doesn't work So the solution we're looking for is not something which is that in 2d space it needs to be in 1d space And if you hear that and you're thinking Wait on a minute Cubic bezier is a this is a you know, I was just talking about the x and y coordinates of these things And you would be right. This is a hack. It's and watch You could do this and now we have the same problem same problem But I think if I remember correctly like CSS auto corrects that when once you like do stupid things with cubic bezier Well, the restriction is you can't have x values that are less than Zero you can't have them that are greater than one and that's an overshoot and why but not x So there's that there's the hack That's the work around to make this fundamentally two-dimensional thing work for what is actually a one-dimensional system So, you know people have been thinking more about this or you know, could we express this as Multiple phases it looks like there's one two three four phases like you know Could you express that in a 2d way but with the same sort of protections, right? And then people started talking about a cube explains which would be doing it in a one-dimensional way There was a lot of maths getting involved and then the conversation kind of pitted out for a few years I'm out too much. Well, well, that's the thing and I was looking at it I think what happened is it it was getting a bit like it was getting a bit too clever And what what needed to happen here is it needed really dumbing down and I that's that's where you come in I know someone I Know a guy Who can do this? So, yeah, I thought about in the same way you were saying before it's like this is a function. Yeah, so And so this is the way of doing it a bounce sort of math, isn't it? Yeah, but you copy and paste it from somewhere exists already all of us have started the stack overflow approach Okay, there is a one big site that has all of the Easing functions that we know and love including these ones that you can't do link in the description Link in the description. Yes, absolutely But I thought it's like well hang on We do already have a place where JavaScript and CSS come together Just one worklets is is one very like key place where they interact So I was like, well, why don't we do this then? We've got our You know easing work, but I wasn't you know, we talked about paint worklets in the past Well, if we did this and then inside, you know, you define your bounce animations put the paste the JavaScript code in there And then in your CSS you can do something like this This is fun for me to see because this is Effectively what animation worklet was supposed to be that's what the first draft pretty much looked like not not exactly as an easing function But you were able to do that you you get the input value between zero and one which was time and you could do math Want to use a sign function go for it. Yeah, that was possible So you can you can build similar stuff with animation worklet, but you are You are then driving the whole animation. Yeah, rather than just the easing and it's it's more complicated Then I would like it to be for something as simple as you just want to do easing Animation worklet is like a big cannon to use for just an easing function Especially if you want easing to be in gradients and other places as well So I shopped this idea around I was, you know Fix it with JavaScript, but why not? And there was some like oh, maybe internally I spoke to Simon Fraser of webkit and Brian Bertels from the ideas the web animation spec stuff and The feet well Simon Fraser in particular said well, so hang on are these values being calculated for every frame? And I was like, yeah, sure. Why not? And there's all committed. Can I you know if I implemented this? Could I just calculate them all in advance? I mean, it's probably Effectively side-effect free so you could just put the number zero to one through it beforehand, right? Yeah, I was like, well Yeah, it kind of works and it was Brian who was saying Yeah, these these ideas are always going to boil down to that. It's like given enough points Yeah, you do need a function do we need a whole system and I realized that I you know I've done the same as a lot of other people on the thread. I've started over complicating it So I'm back to the drawing board and yeah, I was thinking about what Brian said is like, well, yeah With two points you can do a linear thing, but then if we add five and ten Twenty and now it's starting to look like the thing and with 50 points. I mean, there's no curves here It's all just lines. It's points connected linearly, right? Like there's no smoothness or anything. It's like I It's almost in this issue. I think the one you can see it on the one trough there, but I yeah, if you zoom in Yeah, I think if you actually use this as an animation curve, it's probably good enough Well, you're not gonna look at the curve. You're gonna look at the thing moving, right exactly So I mean here it is and it's I can see the linear lines. Yeah, can you see? But you would you know for 50 points to look wrong you are going to have to have a very long animation Which I mean is that ever going to yeah, probably not gonna happen not for a balancing kind of thing So yeah, it got me thinking of like what How could we define this? What would this look like and I realized it already exists linear gradient has this similar system It's a series of points that we connect linearly. Yeah, if you don't specify any like percentages It's just like Equally spaced between start and finish and then just dust the thing and linear between each point. So Why can't we do this? You know that yeah, so this was the proposal I made Saying like well, we could just have yeah comma separated points and it would distribute them itself I see why you would call it linear, but it really bugs me that the function is called linear Yeah Do you know what this maybe that bit needs to be renamed because you're right this this confuses people that it's called linear Right especially with this explanation But it's like if you look at it from a cold perspective like you're very specifically trying to diverge from the linear easing Yeah, the reason I picked linear is because it's already a keyword and CSS so making it a function It's like and the idea is if you called it with no arguments It would give you a you know the same as the linear keyword. No, but I do agree I think this might not be the right name for it You just treat this like if you don't like the word linear linear gradient is the same, right? Yeah But it's the things with linear grain if you like 90 minutes of the time you have more maybe that's just me being lazy I think you only have two color stops start and end so actually most of the time it makes sense But you're right like once you have more color stops It actually isn't a linear gradient anymore. Is it like linear between the points you provide, but yeah of all it's not but I Have shown this to enough people and they've You know pull the face at the name. Yeah, whatever, you know that can change, but yeah, just like You know your gradients just add a point in there now. We've got a midpoint that you can shift around Like linear gradients gonna bring this up. Yeah, so you can do this With gradients as well where you're specifying, you know good by default that seven would be in at the 50% mark But now I'm saying I actually want to be able to so 20% this is obviously bike shedding for something that isn't even real yet, but I Feel like the 20% should go in front of the point seven because it would be it in this sense It's coordinates isn't it like well, that's interesting. I But I also see that follow the same pattern as I agree. It's just like I was looking It's like that this is now actually if you were put the percentage on every Point it would be yx corner. Yeah, so there is There's a number of things to back shit about this like you could say well Why is it point seven and twenty percent? Yeah, right? I and I was keen on those being the same kind of unit a tab at concern is not keen on it And I think that maybe means that you could have them the other way around and it it would know Which is which because one is a percent and one is a true So and having presents makes sense because it is what linear gradient does as well I think the president for sure You know I keep forgetting this is a thing you can do this with linear gradients So why not do it with linear easing as well. I mean It creates an extra point With the same value the same value. So like That and today I learn so you can do that if gradients so same with this is like well Why you know, why wouldn't we want it with this as well because you can create a super handy foot? Yeah, because right now we do have stepped The step function in CSS for you know saying you know ease there, but just do it over five Points, but you can't combine easing and step Yeah, but you can with this like because you can create the steps money What if you want to have steps, but the transition is slightly slanted so you go Exactly. Yeah, so you could you could do that easily. So yeah, and then you can just add as many points as you want And create something like this So you this is your 50 points and now we have bouncy using the web, you know And you we could do the elastic thing as well I could probably get quite big like you would need a lot of points for longer animations, but then again Well, let me stop it like, you know this many Works pretty well. I think this is 50 and so that's your bounce function Someone raised the point of like it's a lot of stuff to put in your CSS It's kind of ugly and also you can't really tell from looking at it what it does. Can you if the And I don't think I'm gonna put it in a CSS variable and a proper custom prop and just all like that Yeah, like that. So and I think that's the answer here and then you would be able to just use it Bounce. Yeah, that's the meaning of it. Probably Jesus quite well as well. Oh, absolutely. Yeah So that that is what I've pitched to the the CSS working group and to browsers. Okay, and When are we shipping it? Well, Missila have said thumbs up. We want to implement this. Oh, that's good Chrome folks have said the same That's too only a fool would predict when this will land in the browser. I know a guy We might get this in Q1 20-20 time where the kind of memory yeah in canary in canary sure Yeah, and you know firefox nightly if you know things get moving in time Maybe Q2 but all the pieces there, you know, there's still a possibility in future for being able to define these like proper Cube explain curve things to do the more complicated thing But I think hopefully this this is a great escape hatch like you can do whatever you want with this Exactly. So fingers crossed We do an episode Winch I do like whinging I got wings I got all wings We have sound It's a sound like with sound. We good. Yeah, everything sounding good. Yeah All right, okay Okay