DEV Community

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

Posted on • Originally published at blog.okikio.dev

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 https://static-misc-3.glitch.me/linear-easing/.

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, blog.okikio.dev.

Photo by Ellen Qin on Unsplash.

Top comments (0)