In this episode of HTTP 203, Jake and Surma talk about easing in CSS.
You can
ease-in
, you canease-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.