easeSmoother

The CSS cubic-bezier timing function creates easing curves using 4 control points.

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.