The first and last control points are fixed at (0,0) and (1,1), while the second and third control points are passed as arguments to create a variety of easing curves.
Sometimes an "in-out" easing is needed which starts slow and ends slow. I experimented to find a curve that best approximates the smootherStep function (see here) which produces a natural acceleration similar to when we change lanes while driving on the highway or when we reach for something (see also this).
Specifying the timing function as "cubic-bezier(.49,0,.51,1)" creates the lowest error compared to the minimum-jerk reference (see code at the bottom of this article). Visualize the timing here using Lea Verou’s cubic-bezier.com (compare to ease-in-out). JSFiddle example: https://jsfiddle.net/intrinsica/9ryqet30
If a preset it created, it could be aliased as easeSmoother or easeInOutSmoother.
The green curve below is the reference min-jerk function. The purple curve is the easeSmoother cubic-bezier.
JavaScript reference (see also):
function MinJerk(t) {
var ts = t * t, tc = ts * t;
return 6*tc*ts - 15*ts*ts + 10*tc;
}
Alternatively:
let MinJerk = t => (6*t*t-15*t+10)*t*t*t;
Below is the L2 error curve, comparing the cubic-bezier to the reference min-jerk function.
