Cherry-pick

Animating shapes left and right I have a chance to add character with easing functions. The idea is to deviate from linear motion processing time, and map the input value to a less predictable figure.

const sineInOut = (t) => -0.5 * (Math.cos(Math.PI * t) - 1);

Inspired by CSS and cubic bezier functions, I tend to rely on a few, safe options like sineOut, but for something more daring, more responsive, I’ve certainly toyed with more variable curves.

In some instances, I even tried more outrageous functions, exceeding the possible values before settling on the final result.

But there is one function I had yet to use, that for a bouncing change.

The curve may look nice, but the effect is quite drastic, almost obnoxious. Values move rapidly toward the end and then recede back, again and again, with ever so smaller gaps and a hiccuping tone.

Would there ever be a good reason for the excessive change? Turns out, there is, but you might have to look at the picture from a different angle. And two types of input: time and, similarly to previous projects, patience to lose control.