Bringing Bounce and Elastic easing to CSS

In this episode of HTTP 203, Jake and Surma talk about easing in CSS.

You can ease-in, you can ease-out, but CSS doesn’t let you bounce. Jake and Surma chat about a proposal to fix that.

After first going down the rabbit hole of creating a (now-abandoned) proposal to define custom easing functions, Jake went for the non-overcomplicated route: a proposal for a simple syntax in which a CSS author can define an array of (output) values that are mapped to the input range [0..1]

Below is an example with 10 values:

.whatever {
  animation-timing-function: linear(0, 0.09, 0.4, 0.8, 0.83, 0.75, 0.9, 0.95, 0.98, 1 100% 100%);
}

☝️ Name of the function to be bikeshed, but you get the idea.

If you crank up the number of values, you can eventually create an array of values to represent a bounce movement.

Jake being Jake, he, of course, created a tool to generate a sequence of values.

bezier-easing – cubic-bezier implementation for your JavaScript animation easings

bezier-easing

bezier-easing provides Cubic Bezier Curve easing which generalizes easing functions (ease-in, ease-out, ease-in-out, …any other custom curve) exactly like in CSS Transitions.

Pass in the 4 points of the bezier curve of your liking – just like you’d use when defining a CSS Transition Timing Function using cubic-bezier() – and then project x, ranging from 0 to 1 (0% – 100%), in it.

var easing = BezierEasing(0, 0, 1, 0.5);
console.log(easing(0.0)); // 0.0
console.log(easing(0.5)); // 0.3125
console.log(easing(1.0)); // 1.0

Installation possible via npm:

npm install bezier-easing

bezier-easing
bezier-easing Examples →