Back in the Macromedia Flash 5 days (25 years ago!), Robert Penner popularized the easing concept. I can't imagine the void we had before that. I clearly remember me starring at the formulas in ActionScript 1.0 (see [1]) without any chance of understanding them - but usage was clear, easy and fun!
Those formulas basically generated the required tweening numbers mathematical (comparable to the Bezier approach mentioned in the article). That's a much different concept to the linear interpolation described in the linked blog article where you pass in a static list of numbers. The more complex your curve the more numbers you need. That's when the author links to the external tool "Linear() Easing Generator" by Jake Archibald and Adam Argyle. It was a fresh and nice reading even though animations are less a topic for me then it was back with Flash.
Here an example of an easing function from the linked source file.
The tween executing function would pass in time (t) and other parameters I can't name to calculate the resulting value continuously.
Math.easeInOutBack = function (t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
};
If you want to dig deeper, visit roberpenner's easing overview [2] with some resources. Surprisingly all of those links are still working.
Back in the Macromedia Flash 5 days (25 years ago!), Robert Penner popularized the easing concept. I can't imagine the void we had before that. I clearly remember me starring at the formulas in ActionScript 1.0 (see [1]) without any chance of understanding them - but usage was clear, easy and fun!
Those formulas basically generated the required tweening numbers mathematical (comparable to the Bezier approach mentioned in the article). That's a much different concept to the linear interpolation described in the linked blog article where you pass in a static list of numbers. The more complex your curve the more numbers you need. That's when the author links to the external tool "Linear() Easing Generator" by Jake Archibald and Adam Argyle. It was a fresh and nice reading even though animations are less a topic for me then it was back with Flash.
Here an example of an easing function from the linked source file. The tween executing function would pass in time (t) and other parameters I can't name to calculate the resulting value continuously.
If you want to dig deeper, visit roberpenner's easing overview [2] with some resources. Surprisingly all of those links are still working.[1] https://robertpenner.com/easing/penner_easing_as1.txt [2] https://robertpenner.com/easing/