# Adding Custom Easing to the Web Animation API

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

%[https://blog.okikio.dev/okikioanimate-the-animation-library-built-using-web-animations-api-waapi]

Well a major limitation of the Web Animation API and consequently [@okikio/animate](https://npmjs.com/@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://www.kirillvasiltsov.com/writing/how-to-create-a-spring-animation-with-web-animation-api/)

<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](https://npmjs.com/@okikio/animate) but that isn't absolutely necessary, it just may not be as comfortable as using it with [@okikio/animate](https://npmjs.com/@okikio/animate). 

You can view a demo below,

%[https://codepen.io/okikio/pen/abJMWNy]

As of right now if I add this to the [@okikio/animate](https://npmjs.com/@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](https://npmjs.com/@okikio/animate), please tell me what you think in the comments below.

You can also tweet at me 

%[https://twitter.com/okikio_dev/status/1406396750668210180?s=20]


* * *

This article also appeared on [dev.to](https://dev.to/okikio/adding-custom-easing-to-the-web-animation-api-2c68).

Photo by [Ellen Qin](https://unsplash.com/@ellenqin) on [Unsplash](https://unsplash.com/photos/fIMqGvVaATk).