Is there a tool for creating VF animated images?

Adam Jagosz said:

Be careful with animating live type on the web, as there is a long-standing issue in Chrome that may in many cases (especially animating axes other than weight or multiple axes at the same time) crash the tab after a few minutes. https://bugs.chromium.org/p/chromium/issues/detail?id=778352 (Go on and star the issue now to guilt-trip the dev team, by the way).

Sometimes a JS solution (e.g. GSAP) may be preferred over CSS keyframes as the issue is related to caching nearly-identical keyframe animation frames that builds up into gigabytes until you run out of memory and the tab crashes.

Anyway, I think a video may be actually more performant than a live animation, of course for the price of being less cool and non-interactive.

I dug into this issue a little the other day and although I'm not sure I fully understand what's going on under the hood, I was able to seemingly stop the memory leak.

Chrome will clean up the animation cache if the animation completes its iterations and an animation fill mode is enabled. Animation fill modes are not set by default, and if your animation is looping infinitely it will never reach the point where Chrome cleans up the cache. So I wrote the following function which enables a fill mode on all animations that autoplay, changes the infinite loop to a single iteration, and sets up an event listener that replays the animation the instant it finishes to simulate a loop. The result is an animation that appears to loop smoothly but is actually stopping for an instant to trigger the cache cleanup.

// Stop memory leaks from infinite animations
document.getAnimations().forEach(anim=>{
  if (anim.playState == 'running') {
    let timing = anim.effect.getTiming();
    timing.fill = 'both';
    if (timing.iterations == Infinity) {
      timing.iterations = 1;
    }
    anim.effect.updateTiming(timing);
    anim.addEventListener('finish',e=>{
      let timing = e.target.effect.getTiming();
      if (timing.direction == 'alternate') {
        e.target.reverse();
      } else {
        e.target.play();
      }
    });
  }
});

Just adding https://tdbr.xyz/font-animator to the thread