Adding Custom Easing to the Web Animation API

Adding Custom Easing to the Web Animation API

Subscribe to my newsletter and never miss my upcoming articles

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

https://github.com/w3c/csswg-drafts/issues/229#issuecomment-860778689

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 dev.to.

Photo by Ellen Qin on Unsplash.

Interested in reading more such articles from Okiki Ojo?

Support the author by donating an amount of your choice.

 
Share this