New life-like easing in CSS

I don't know about you, but whenever I see a new CSS feature, I always log it away for later once it's really supported. Well, well, one of those was the linear function that somehow was baseline 2023, and I'm just now finally getting back around to it. So, I took this weekend to look over all the spec, read a bunch about it, and I want to show you that today. You ready? Let's go. Hey, what's up? My name is Chris and welcome to Coding in Public. Okay, so I created this little demo example here. I'll include the code pin down below, but it allows you to see this animation happen in real time. Now, this linear function is an easing function. So, you can use things like just a normal linear movement or you could use an ease in or an ease out, but these are all kind of built in by default. You can obviously use even like a cubic bezier curve if you want to, but this goes far beyond that. So, just to give you an example of this, here's more like what you would think of as like an extreme uh cubic bezier curve, but you can do a lot more interesting things like this kind of snapback elastic behavior or drop where it kind of like vibrates when it hits. Uh you can even have a bounce mechanism like a a ball hitting the ground sideways somehow. Uh or you could overshoot it and kind of snap back like a traditional animation in a cartoon or something like that. It even anticipates that. I don't know if you just saw that, but it kind of anticipates the movement and then does the movement. So, how does all this work? Well, you can see here I could use things like ease in or ease out or ease in out. I'm just showing this kind of in JavaScript the way I set it up. But this is the value that matters. Or as I scroll down here, let's get a little bit more room so we can actually see what's going on. Instead, for these lower ones, the ones on the bottom level here, I'm using linear. And that's what I want to talk about this easing function. So, how does it actually work? Well, if you come over here, you can see, like I said, it's been baseline since 2023 somehow. I'm not sure how that's possible. Um, but you can you can give it different values. is it accepts two or more of the following values which represent progress points in an animation timeline. So you use this for animation uh timeline that actual easing function or key uh frames as well. So here you see we've got numbers and percentages. You can add either of those. Now you're not going to do this by hand and there's a bunch of uh cool tools I'll show you here in a second but you can see how with just a little bit of knowhow you can make a lot more interactive and like true to like real life kind of uh animations. So here's a bunch of different examples here. They're evenly distributing the progress across these points. Here they're using percentage values as well. Again, this is not something you're going to do by hand. Now, as far as support goes, we're about 88% or so, which for most people is fine. We're basically talking IE. Um, I mean, it's been, like I said, since 2023 across all the major browsers. Now, probably the best article I've read on this, no surprise at all to those of you who know Josh's stuff, is this springs and bounces and native CSS. So, you can actually see these kind of live in real time. This is ease in uh ease in and out and ease what I just showed you a second ago. Now, here it is using the linear function. You can see how you can do way more expansive things as well. Now, not only does Josh do a great job walking through all the different options available to you, you can actually play with these, too. I think he has one down below at least where he lets you actually adjust it kind of live in real time. Talks about browser support, talks about spring physics in case you're interested in that kind of thing. Um, but really where the advantage comes is a lot of the tools he points to. So I want to point at just two of them here. This linear one by Jake Arjabald and Adam Argyle. And you can select any of these and it shows you kind of the math involved if you were to run this thing in JavaScript. You can also run it in SVG as well. And it kind of walks you through that. But here's the actual linear function. Now, I'm not going to write that. I don't know about you, but this is how you produce something like that. So, what you really need is a tool that can let you do this easily, and that's what we have in the easing wizard, which is my favorite of the ones that he mentions here. Here are just basic bezier curves, and you can actually adjust them and see how this responds in real time. He also has a bunch of presets as well, uh, this easing wizard. And then you can come in here to spring, and this is where we get into linear functions. So again, you've got like kind of bouncy, you've got drops, and you can adjust all this as well. Change the duration of how long you want this to go, the stiffness of it. So all this gives you like all this power right here. Now, once you're ready to use it, you simply copy out this linear um function, this easing function, and you can use it in the transition timing function or the animation timing function. So either of those will work just fine. Now, again, there's wiggles, there's overshoots. This is where I started with a lot of the ones I showed you. I think a couple of them I kept exactly as were uh but you can adjust these and kind of change them around as well. So hopefully that's helpful for you just to kind of understand what it is, how to use it, and tools to actually get it working in production. Now I think most developers are not going to want to understand all the details of the math behind this. You just want to know how does it work? How can I implement it? And that's enough. And that's how I am for the most part. So the easing wizard was super helpful for me just to say, "Okay, I'm going to grab my presets and that way all those interactions on my site are a lot more realistic to how you might interact with something in the physical world." And that's really the benefit of linear. Well, let me know if you like these kind of short videos. I've got a bunch of things in CSS that I need to go back to. And uh so if you want kind of a quick preview of how to use it, what it is, and all that, let me know down below. All right, thanks so much for watching. I'll catch you in the next one. Happy coding.