The Core

DemoSource

Another p5js/Codepen.io experiment. This time playing around with contours and lerp to get gradient fills inside a polygon.

I’ve been trying to learn a bit more about easing functions. More specifically elastic easing. It is fairly easy to do a single bounce with CSS. Tools such as bounce.js can be used to generate more complex versions. However, I had no idea how to do this with JS or what the underlying equations were

Despite the commonality of the classic easing equations, largely attributed to Penner, there doesn’t seem to be the in-depth examination of “how it works” that a lot of code is subject to nowadays.

Explaining Penner’s equations – JavaScript and ActionScript

We start with this basic equation where:

  • t is the current time (or position) of the tween. This can be seconds or frames, steps, seconds, ms, whatever – as long as the unit is the same as is used for the total time.
  • b is the beginning value of the property.
  • c is the change between the beginning and destination value of the property.
  • d is the total time of the tween.
function noEasing (t, b, c, d) {
  return c \* t / d + b;
}

And then use polynomial functions to create all kinds of easing effects:

function bounce(t, b, c, d) {
  var ts = (t /= d) * t;
  var tc = ts * t;
  return b + c * (33 * tc * ts + -106 * ts * ts + 126 * tc + -67 * ts + 15 * t);
}

Tim Groleau built this a really cool Easing Function Generator which I used to generate the bounce easing function.

Questions, Comments or Suggestions? Open an Issue