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 …
We start with this basic equation where:
tis 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.
bis the beginning value of the property.
cis the change between the beginning and destination value of the property.
dis the total time of the tween.
And then use polynomial functions to create all kinds of easing effects:
Tim Groleau built this a really cool Easing Function Generator which I used to generate the bounce easing function.