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.