Adding Custom Easing to the Web Animation API

Adding Custom Easing to the Web Animation API


2 min read

I recently posted about @okikio/animate, a new Animation library that uses the Web Animation API (WAAPI) to create smooth, and highly performant animation.

Well a major limitation of the Web Animation API and consequently @okikio/animate, was that it didn't support custom easing, this limitation is on the verge of being removed.

Based on a comment by jakearchibald on Github and an article by kirillvasiltsov

Using the fact that WAAPI allows for linear easing, I created a small function that generates a set of arrays that create custom easing effects like bounce, elastic, and spring. As of right now it builds on top of @okikio/animate but that isn't absolutely necessary, it just may not be as comfortable as using it with @okikio/animate.

You can view a demo below,

As of right now if I add this to the @okikio/animate library it will more than double the size of the library (Note: treeshaking the actual package @okikio/animate while custom easing isn't in use will cause it to excluded from the final build reducing the size down to ~5.79 KB).

I'm not sure if I should make Custom Easing a separate package or build it directly into @okikio/animate, please tell me what you think in the comments below.

You can also tweet at me

This article also appeared on

Photo by Ellen Qin on Unsplash.