The Core


Another p5js/ 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

Creative coding from a front-end developer's perspective

My goal with this blog is to go beyond the basics. Breakdown my sketches. And make animation math approachable. The newsletter is more of that.

Hear about what's got my attention—new tools and techniques I've picked up. Experiments I'm working on. And previews of upcoming posts.