Adding CSS animation timing function presets to Firefox Dev Tools.

About a month ago a rogue retweet from @patrickbrosset​ landed in my timeline:

I’d been on the lookout for a nice feature to attack as my first open source contribution and this seemed like just the right amount of fun and work to take on.

At the time the inspector already offered a convenient way to specify your own custom cubic-bezier function. You simply open up the tooltip through the inspector and adjust the handles until you get your timing function just right.

It looked like this:

Current Cubic Bezier Widget

The motivation behind the patch was to provide a set of common mathematical functions for use with the css-timing-animation property. After some back and forth on design and requirements we settled on the addition of 31 presets under categories ease-in, ease-out, and ease-in-out. Here’s how it turned out:


What was there was already good but I’ve definitely found this to be a nice usability improvement. In some cases this may even serve to drive awareness of timing functions you might not know existed or forgot about.

As someone who wrote their first lines of code on Firefox, Firebug and the WebDev toolbar back in the day, I find it fitting this is my first contribution –even if a small one.

Thanks so much to Patrick and the Firefox Dev Tools team for all the help, I hope developers out there find this to be a useful addition.