Web Animation Gotchas #
This is an excellent overview of using the Web Animation API.
I meant to share this a month ago when I first saw it, but it came up again recently when I was making some animation improvements to a website I've been working on, so there's no time like the present.
I made some minor changes to the animateTo
function included in the video for my own purposes, so the snippet I use is along the lines of:
function animateTo(element, keyframes, options) {
let cleanup = () => {};
return new Promise((resolve, reject) => {
try {
const animation = element.animate(
keyframes,
{
...options,
fill: 'both',
signal: undefined
}
);
const finish = () => {
try {
animation.commitStyles();
animation.cancel();
resolve();
} catch (e) {
// handle browsers that don't support `Animation.prototype.commitStyles`
reject(e);
}
};
animation.addEventListener('finish', finish);
// While the animation is not exposed through `animateTo`,
// animations can still be cancelled via the `signal` option,
// or when accessed from `Element.prototype.getAnimations`
const cancel = () => reject();
animation.addEventListener('cancel', cancel);
// Add support for AbortController
const signal = options.signal;
const abort = () => animation.cancel();
if (signal) {
signal.addEventListener('abort', abort);
}
cleanup = () => {
animation.removeEventListener('finish', finish);
animation.removeEventListener('cancel', cancel);
if (signal) {
signal.removeEventListener('abort', abort);
}
}
} catch (e) {
// handle older browsers that don't have `Element.prototype.animate`
reject(e);
}
}).finally(cleanup);
}