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 …


This content originally appeared on Bram.us and was authored by Bramus!

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.


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate Updates
APA

Bramus! | Sciencx (2021-12-03T23:54:24+00:00) Bringing Bounce and Elastic easing to CSS. Retrieved from https://www.scien.cx/2021/12/03/bringing-bounce-and-elastic-easing-to-css/

MLA
" » Bringing Bounce and Elastic easing to CSS." Bramus! | Sciencx - Friday December 3, 2021, https://www.scien.cx/2021/12/03/bringing-bounce-and-elastic-easing-to-css/
HARVARD
Bramus! | Sciencx Friday December 3, 2021 » Bringing Bounce and Elastic easing to CSS., viewed ,<https://www.scien.cx/2021/12/03/bringing-bounce-and-elastic-easing-to-css/>
VANCOUVER
Bramus! | Sciencx - » Bringing Bounce and Elastic easing to CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/03/bringing-bounce-and-elastic-easing-to-css/
CHICAGO
" » Bringing Bounce and Elastic easing to CSS." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/12/03/bringing-bounce-and-elastic-easing-to-css/
IEEE
" » Bringing Bounce and Elastic easing to CSS." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/12/03/bringing-bounce-and-elastic-easing-to-css/. [Accessed: ]
rf:citation
» Bringing Bounce and Elastic easing to CSS | Bramus! | Sciencx | https://www.scien.cx/2021/12/03/bringing-bounce-and-elastic-easing-to-css/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.