DEV Community

Cover image for Adding Custom Easing to the Web Animation API
Okiki Ojo
Okiki Ojo

Posted on • Originally published at

Adding Custom Easing to the Web Animation API

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

Comment for #229

Yeah, you can hack it with keyframes today, but it'd be nice if it could be could be used within keyframes. Something like linear-easing(0, 0.1, 0.3, 0.6, 0.8, 1) or whatever would be enough.

Comment for #229

Here's a little demo to test that

Cases like bounce are tricky due to sudden changes of direction, but 50 points seems to do well.

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.

This article also appeared on my blog,

Photo by Ellen Qin on Unsplash.

Top comments (0)