085: Linear easing function fun

Key Takeaways

[Music] hello and welcome back to the CSS podcast today we're easing you into a new CSS function that can take any number of parameters you want endless points for Endless fun it's a delightfully simple concept with powerful results I'm talking about the timing function called linear yes don't be fooled by its name either cuz it's capable of way more things than linear interpolation while it does in fact move linearly through the points you just specify in the function but with enough of them your eye can easily be fooled into seeing very fluid and dynamic motion like Springs bounces squishes squashes boings zings flips fluns flops plops wobbles and wiggles and so many more wow the browser support has been its Baseline newly available since December 2023 and it's just cool to note that Firefox did it first they saw it and we like boom are those names from open props two of them are fling boing Zing flung flop flop I'm channeling my inner uh Dr Seuss I suppose yeah so while you might not call it boing zing and fling you might be more familiar with timing functions using the keywords like ease ease out or ease in out and you might also be familiar with steps or the cubic bezier functions other functions for controlling Interpol of properties in CSS so this is how things animate if you're not check out our learn CSS course on web. dlearn CSS where we talk about some of these things yeah so the new linear function enters the game by breaking out of the four parameter cubic bezier function and allows any number of points to be specified the limit does not exist the limit does not exist like we need girl reference hey nice coming in with the movie referen I got some references too I like it um the limit does not exist Adam cool so I checked in with Jake about this and it is true that there is no limit but at some point there would be performance issues I don't know if anyone's done a study on what that point is so just be reasonable I guess within reason or do the study because I'm curious what is the point at which you start to face weird performance issues yeah I mean a browser crash if you could crash a browser with this then uh which is what people were doing with the billion laughs attack generally we put in guard rails for stuff like this so maybe it just needs someone to make a demo that crashes every tab that opens it and then the browsers will go hey we don't like that and they'll put a limit on it I don't know what the limit would be though you'd have to figure out something reasonable but I mean in most of the ex examples that I build I try to keep it as low as possible right because I don't want there to be a whole bunch of bites over the wire just to have a cool springy animation and usually I can get a really good one for 20 oh really that's it yeah that's it and if and if you're really feeling like uh you need more more Fidelity and maybe the duration is a very long time or something maybe up to 50 or 100 but I I I don't imagine needing many more than that but I don't know maybe someone's got a it boings and then it flings and then it flops and it zops and it's all built into one I have no idea um anyway in general the more points you specify you do get a smoother result so like the game is like I was just saying how do I achieve a nice lifelike spring effect with as few points as possible but also we're kind of getting ahe of ourselves like we've is for interpolation and that it's a timing function but you know will you give them the more technical breakdown of how this function Works sure so the linear function accepts any number of stops like we mentioned and they are comma separated so each stop is a single number value between zero and one so linear without the function just linear goes from 0 to one it is a linear easing function for an animation you probably have seen that and used that but when you open up the parentheses for that's where you could have any number of stops in between so in between each stop the interpolation is done in a linear way so that's why it's still called linear it's a linear easing function because as you go between each you're kind of going straight line from one to the other so you can have a function with three stops like linear 0 comma 0.251 which would go from 0 to the 0.25 numeric number to one at the end that's the the place in the animation that you're moving to or you could have 300 linear stops which Adam said he wouldn't recommend but I want to see what happens and so this can emulate what feels like a curve when you have a bunch of these stops because while it is linear you have so many of them and as they get closer together you can sort of create these faux curves by default these stops are evenly distributed but you can also specify their placement which is similar to how you would do that with a so you could have something like a linear and open parentheses 0 comma 0.25 space 75% comma 1 and this would have the 0.25 Mark of the animation at the 75% time Point instead of the 50% time point which would be like the even distribution that's how you would do that similar to a gradient and the first and last items you might have noticed here don't have 0% and 100% that's just zoomed for the first number and the last number and this is really useful it solves multiple problems so we had a lot of feature requests that folks were asking for for multiple types of easing functions all sorts of them boing zo bounces flings that could transition from one type of easing into another so also the desire to have easings build on each other was one of them and then Jake archal proposed a simpler Solution by just reusing linear in a functional format the linear easing function that required far fewer rules and math and new things to be added to the browser that were more specific and you could instead Define a more complex easing result with a bunch of simpler ones yep the trade-off was that the authoring of these is bizarre it's not very human to handr write these and so Jake made a tool which we'll get into in a second but the proposals were wild coming from like after effects where After Effects can do really amazing things between two points and it's the way that it can ease and was like no let's just do this and he had demos that made it look he's like here's squishes and here's bounces and here's squashes and they do really well and I like metaphors and to make things Visual and so one of the ways um I think about this and maybe it'll help someone out there is like a constellation or a connect to the dots picture so like straight lines are drawn between each of the dots right and so when there's only a few points the result of the design is pretty low Fidelity and it takes your imagination to fill it in so if you've only got a few points in your easy it's probably still going to look kind of linear but you increase the number of points and you can create uh some things that are have much higher Fidelity results and even though there's like really dinky straight lines between each of these there's enough dots in there that you can make an arc and you can make a circle that's what linear does it stitches a bunch of linear interpolation together into what can look like a high-res springy bounce effect it's pretty cool what you can't just immediately visualize linear 0 comma 0.947 17% 1.15 24% 30% 1.02 43% 51% what you can't just visualize that no no I cannot especially over audio yeah these can get really complex especially if you have like multiple curves and in that example it sort of even went outside of the linear bounds like it over bounce so there's just a lot you can do here yeah it's like reading SVG path data that's a good yeah that's a good comparison some people have memorized that they're like M to 20 and L to 22 and you're like wow that's that's a skill what does that mean d equals no I used to be able to sort of be able to kind of read it because I'll tell you why there was this book all about hand authoring SVG that I did a audiobook translation for just voluntarily because I was really into like audio versions of everything and so I like read the whole book and then I sort of said it and then that knowledge just went out of my head a month later yeah it's been my quest twice in my career to be able to hand CU there's so many cool superpowers if you can memorize the SVG syntax because right you've got like animations along curves you can draw lines and there's really cool and I've just seen so many neat animation potentials but yeah it's just it disappears soon I'll link it in the show notes okay so it's uh it's like constellations it's lots of dots with straight lines between each of them and if it's so cryptic and unapproachable how are people supposed to use it what what are we supposed to do just give up no I'm kidding so there's a few ways that you can do it ranging from you know DIY and free or ready to go I mean you could ask AI oh yeah but good luck it's just going to make something up AI is just notoriously bad at CSS it is especially modern CSS it doesn't have any good examples to learn from either right now we're going to have to go seed it with some good linear examples yeah so speaking of good linear examples you can use some pre-made linear functions off the shelf from a CSS Library like for example Adams Library open props which provides a few different Springs and bounces that use linear yeah yeah it does you can also use a really convenient generator tool that we've sort of been hinting at which was built by Jake and Adam who's that guy yeah Adam has no idea what this tool is so give us a rundown of how to it sure and I was the designer Jake was like I'm building this thing and it needs to look pretty would you help me and I'm like cool I can do that the tool spits out linear easing function so it's a generator you visit it it's got a preview and all sorts of other cool things that can sort of help you establish a good linear function that you basically just copy and paste into your project so like we said people aren't going to be handwriting this so Jake wanted to provide a tool that could help people um use it right away and it allows providing the desired easing as a JavaScript function or as an SVG cve curve so with that is the input it provides a visual representation of the effect that you're going to get and it has levers for reducing the number of points and adjusting how much rounding is happening in those values so you get two different ways to sort of reduce the complexity of the function itself because otherwise it gets into really bizarre floaty numbers that are like 22 69493 and you're like how about it's just 22 whatever you're like does it really need to be and so but the thing is is the tool gives you these tools to adjust these because depending on the length of the animation and what going for it can make a difference in terms of the Fidelity and so this is the game you play on the site it's a generator but it's also a game no it's not a game but I mean anyway you see what I mean the game is like how much can you simplify and reduce while still achieving the same visual result that you want so this is what I meant earlier when I was like teasing that the more points there are that can fool the eye into seeing a more Rich effect but the reality is that it's just a set of these linear points and it's like moving the connected dots picture further and further away from you the higher resolution it is the less you notice that those are straight lines between each and they start to look more like arcs which is kind of cool there's also a duration thing that you can change on there it turns out duration is very important in getting the effect you want yeah it's it's really convenient too because I've always wanted to visualize these Curves in a tool like illustrator where you could create an SVG just kind of draw it out and with this tool you can just pop it into the tool and it converts that SVG from illustrator that you can literally highlight copy and paste into a linear easing function and it's sort of a way to visualize this code that made it real to me and the Fidelity adjustment is interesting too because we were talking about how there is a point at which there's a performance degradation but we don't know what the point is so just you know give it a try and see what feels smooth to you oh yeah what is that URL I think it's cleverly named linear ding- generator. nf. apppp so yep go check that out y'all and the link will also be in our show notes so there you have it you can try to write your own good luck uh snag some pre-made linear functions from open props or another library or use the generator to make it easier all up to you nice I do want a side fun note about the open props bounces so there's bounces and springs uh the Springs aren't very surprising they're going to give you exactly what you want I think those are the easiest ones to get started with too they're really easy to use anyway but the bounces are kind of fun there's five of them which is a classic kind of open props thing it gives you five strengths or five different varant of the thing like it's just ease bounce one ease bounce two but what was cool is the number in the variable equates to the number of bounces you see in the result so if you want the ball to bounce three times one two three and then be done you would use bounce three and so on and so I thought that was fun ah I see I see what you did there with the naming yeah it's like uh let's make it easy yeah I like that and then I got one more tip for working with linear which I kind of briefly just explained but duration is really really important and you're going to notice something while you're using this so the visual quality is very tightly coupled to duration and you'll see duration as a lever in the tool but you'll be surprised at how long the duration is that you're going to use on these animations cuz traditionally you might use 250 milliseconds or. 3 seconds or 100 milliseconds I think a lot of people shoot for shorter durations of animations so that they complete quick but you're going to notice with springs and bounces you're going to be over the 1 second duration very often don't be surprised if you need to increase your duration to get the realistic feel of some Physics out of this linear function that is very true and a very good point I normally do like 0.25 seconds for my quick animations in and out just like an opacity change or something like swiping off but if you have an animation that has more motion to it that would feel really rushed and unnatural if it was that short so that's good call nice you just remind me too um careful with using Springs and bounces on opacity it just usually looks ter it go in and out yeah it looks terrible like flickers at you and you're like ew I didn't want to maybe you want some star shining yeah don't judge [Laughter] Adam as always check out the show notes for the links to all these helpers there's also a great article by bromas on web.dev that covers this a bit more in depth and talks about the syntax has some nice visual examples to go along with it and talk more about what these numers mean on a path and you can also snag some easings from that too so if you are a little bit lost in the linear connect the dots stuff definitely go check that out that bramis guy is pretty cool I gotta say we should have him on the show or something we should have him on the show what a great idea H I wonder if that's planned or not thank you all for joining us that's all we have for today and if you got any CSS questions you know where to go tweet them at us with that # CSS podcast and we can't wait to read them yes and you can find me on Twitter ATA that'sa un and I'm at Argy Inc and that's in K on the end and your question could help a lot of people if you like the show please give us a review on whatever podcast app you're using or share this podcast with a friend or a cooworker that's how people find the show and that means that we could make more shows for you yeah we can continue to be silly and share CSS at the same time make the show thanks y'all appreciate you listening we'll see you next time [Music]