Adding Custom Easing to the Web Animation API

UpdatedJuly 26, 2021

•2 min read•View as Markdown

Adding Custom Easing to the Web Animation API

O

Okiki Ojo

Hey, I am Okiki, a student and part-time web dev. I like exploring, testing and learning.

If you need some help in a project I’d be more than willing to help.

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Hot take: Apple v US gov't, the US gov't is right

The lawsuit is more valid than one would think, both legally and logically

Apr 5, 20242 min read374

Hot take: Apple v US gov't, the US gov't is right

From Docker to Podman - VS Code DevContainers

A Simplified Guide for Transitioning from Docker to Podman in Your Development Environment

Oct 12, 20235 min read10.0K

From Docker to Podman - VS Code DevContainers

Mastering the Art of ESM and CJS Package Handling

The subtle shift in bundlejs' behaviour

Jul 8, 20234 min read2.6K

Mastering the Art of ESM and CJS Package Handling

Vercel + Support Center = 🚀

Improving the customer support experience at Vercel

Feb 7, 20232 min read281

Using FormData with Astro

How to upload files with Astro, express and multerjs

Sep 18, 20229 min read6.8K

O

Okiki's Blog

13 posts

Software Engineer at @vercel; Maintainer on @withastro; Creator of bundlejs.com & inthistweet.app

I recently posted about @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, 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,

https://codepen.io/okikio/pen/abJMWNy

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

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

This article also appeared on dev.to.

Photo by Ellen Qin on Unsplash.

#animation #webdev #typescript #javascript #css-animation

714 views

Command Palette

Comments

More from this blog