animateTo.js

/** 
 * This is a better alternative to using 'forwards'
 * fill mode, as it allows you to update inline styles
 * after the animation has completed. Contrast with:
 * 
 * element.animate({
 *   { opacity: '0.2' },
 *   {
 *     duration: 500,
 *     easing: 'ease-in-out',
 *     fill: 'forwards',
 *   }, 
 * });
 * 
 * element.style.opacity = '1'; // never applied
 */
function animateTo(element, keyframes, options) {
  const anim = element.animate(
    keyframes,
    { ...options, fill: 'both' },
  );
  anim.addEventListener('finish', () => {
    anim.commitStyles();
    anim.cancel();
  });
  return anim;
}