Is there a tool for creating VF animated images?

Igor Petrovic · January 2023

From time to time I see animated images in type specimens presenting VF. I guess this is usually done in Adobe AE, but I was wondering is there a simple tool where I can load my VF, type a word, set animation parameters and download it as a GIF?

For example, Fontgauntlet by Dinamo has a pretty good base for this, with all parameters, animation types etc. I hope it wouldn't be much work from there to enable GIF download...

Yves Michel · January 2023

I'm afraid the link you provide is not the good one.

Adam Jagosz · January 2023

There's ColdType https://github.com/coldtype/coldtype

And there's DrawBot https://learn.adafruit.com/getting-started-with-drawbot/animation

Craig Eliason · January 2023

Of those, Drawbot is much easier described as "a simple tool" (from my impressions anyway).

jeremy tribby · January 2023

There is a Coldtype plugin for Blender called st2 that is really cool, and hopefully less complex for some than Coldtype itself, which is pretty idiomatic in some areas and sparse in others. still, it's great if you've got a programming background / are OK running ffmepg to build the videos and so on
The only VF plugin I know of for AE (VF not natively support) isn't great - I would surprised if much or any VF animations are made with AE these days. opportunity area for Adobe....

Ray Larabie · January 2023

While Adobe AE doesn't support variable yet, there's a plug-in called Varifont that sort-of does the trick. I found some other tools, but they were Mac only. As far as I know, that's the only way to get the job done on Windows. There's a kerning bug which causes it to only use the kerning from one master, so you may have to choose test phrases selectively. I don't know if there are any standalone Windows tools that generate animated GIFs from variable fonts.

Adam Jagosz · January 2023

ColdType runs on Windows just fine.

Jasper de Waard · January 2023

Wouldn't it be easiest to just take a screen capture from Font Gauntlet and convert that to gif?

Cory Maylett · January 2023

Animation for what purpose? A website?

If so, a more effective way to animate the type is actually to animate the live VF fonts themselves. Of course, there are some technical challenges if you're not a coder, but I've occasionally run into pre-built code on GitHub. For example, I've coded this live animation into my website (scroll down the page to see it): https://maylett.net/cmd/miss-mable.html

Adam Jagosz · January 2023

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.

jeremy tribby · January 2023

There is also vartype from Space Type for prebaked animations

Igor Petrovic · January 2023

Thanks for all the answers!

Though there is no simple solution similar to what I wished for there are a few possible workarounds. And I appreciate having a quick overview of currently available options.

Samsa project offers animated SVG export, but after giving it a quick try I haven't managed to export a solid color word (only a single wireframe character).

Anyway, it would be great to have a very simple in-browser layout platform where one can perform a basic presentation of variable font and download it in universal format (GIF/SVG/MP4). So to set resolution, type text, run and set axis animations, and set background color or image. That would make it easier for type designers to quickly show previews on social networks etc.

Igor Petrovic · January 2023

Just found out about 2D animation software Cavalry which supports variable fonts natively. It has a free version, and I was able to easily animate my VF and export MP4 (it has no GIF as I can see). Not tested thoroughly but everything looks pretty nice so far.

Thomas Phinney · January 2023

There exist plenty of free MP4 > GIF converters, to go with that. Here is one: https://www.adobe.com/express/feature/video/convert/mp4-to-gif

Justin Penner · January 2023

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();
      }
    });
  }
});

Cory Maylett · January 2023

@Justin Penner, thank you! I haven't had time to play around with your script yet, but I can definitely use it.

Grzegorz Luk (gluk) · January 2023

@Justin Penner I leave my test animation for few minutes and it indeed crashes Chrome tab. Now I play with your script (thank you!) and test for my variable COLRv1 font work since 30 minutes. To be honest I'm not 100% sure I'm using it correctly

test page here (working in chrome and firefox>107)

Dave Crossland · January 2023

Varifont is heroic and has many impressive hacks to work at all

Roel Nieskens · January 2023

@Justin Penner Interesting idea, thanks for sharing! It's not working for me in Chrome (v108) on macOS Ventura, though. I took the idea and tried to see what else could perhaps trigger a garbage collection/cache clean-up. Removing/restoring the entire animation, swapping out the font itself, even removing and restoring the entire element... But nothing will convince Chrome to clean up the cache, and memory usage remained the same.

Did you have luck with this method on Chrome on Windows?

Roel Nieskens · February 2023

The tab crashing bug in Chrome is finally fixed! It'll have to go through the various pre-release hoops before it lands in your regular Chrome, but it's coming. Finally you can animate variable fonts from CSS/JavaScript without melting your CPU!