Is there a tool for creating VF animated images?

Igor Petrovic
Igor Petrovic Nostalgic Dolphin Studio Independent Type Designer Belgrade, Serbia https://nostalgicdolphin.com/ An independent type designer focused on quality over quantity.
A careful craftsman and researcher with a decade-long theoretical and practical experience. Specialized in making highly unique display typefaces with strong yet refined personalities that celebrate traditional typographic values of balance, proportion, rhythm, consistency, curve quality, and spacing. Designs outstanding type specimens.
Founded "Nostalgic Dolphin" studio that specializes in branding and custom type design. Works as a consultant for Cyrillic script and offers mentorship service for beginner-to-intermediate type designers.
Writes on the studio's blog. Critical thinker interested in philosophy and psychology (overlapping areas in particular). Audio producer (indie/gothic/synth pop). Posts: 331
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...
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...
Tagged:
0
Comments
-
I'm afraid the link you provide is not the good one.1
-
There's ColdType https://github.com/coldtype/coldtypeAnd there's DrawBot https://learn.adafruit.com/getting-started-with-drawbot/animation4
-
Craig Eliason Craig Eliason he/him Teeline Fonts St. Paul, Minnesota (USA) teelinefonts.com Posts: 1,485Of those, Drawbot is much easier described as "a simple tool" (from my impressions anyway).2
-
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....
1 -
Ray Larabie Raymond Larabie he/him Typodermic Fonts Inc. President Nagoya, Japan https://typodermicfonts.com/ I'm just a font nerd who stumbled into creating a type foundry back in 2001. These days, I'm tapping away on my keyboard in Nagoya, Japan, dreaming up new letterforms. I've somehow managed to cobble together over 500 typefaces, ranging from "space-age chic" to "grandma's attic nostalgia." It's been a wild ride, and I'm still pinching myself that designers actually use my squiggles in their work. Posts: 1,466While 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.
2 -
ColdType runs on Windows just fine.
0 -
Jasper de Waard Jasper de Waard He/him Bureau Roffa Type designer Amsterdam, Netherlands bureauroffa.com Scientist by day, type designer by night. Posts: 654Wouldn't it be easiest to just take a screen capture from Font Gauntlet and convert that to gif?3
-
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.html5 -
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.5
-
There is also vartype from Space Type for prebaked animations3
-
Igor Petrovic Igor Petrovic Nostalgic Dolphin Studio Independent Type Designer Belgrade, Serbia https://nostalgicdolphin.com/ An independent type designer focused on quality over quantity. A careful craftsman and researcher with a decade-long theoretical and practical experience. Specialized in making highly unique display typefaces with strong yet refined personalities that celebrate traditional typographic values of balance, proportion, rhythm, consistency, curve quality, and spacing. Designs outstanding type specimens. Founded "Nostalgic Dolphin" studio that specializes in branding and custom type design. Works as a consultant for Cyrillic script and offers mentorship service for beginner-to-intermediate type designers. Writes on the studio's blog. Critical thinker interested in philosophy and psychology (overlapping areas in particular). Audio producer (indie/gothic/synth pop). Posts: 331Thanks 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.
0 -
Igor Petrovic Igor Petrovic Nostalgic Dolphin Studio Independent Type Designer Belgrade, Serbia https://nostalgicdolphin.com/ An independent type designer focused on quality over quantity. A careful craftsman and researcher with a decade-long theoretical and practical experience. Specialized in making highly unique display typefaces with strong yet refined personalities that celebrate traditional typographic values of balance, proportion, rhythm, consistency, curve quality, and spacing. Designs outstanding type specimens. Founded "Nostalgic Dolphin" studio that specializes in branding and custom type design. Works as a consultant for Cyrillic script and offers mentorship service for beginner-to-intermediate type designers. Writes on the studio's blog. Critical thinker interested in philosophy and psychology (overlapping areas in particular). Audio producer (indie/gothic/synth pop). Posts: 331Just 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.2
-
Thomas Phinney Thomas Phinney he/him or they/them Font Detective LLC Font-related forensics, type design, font production, general typography expertise. Portland, OR, USA https://thefontdetective.com Thomas Phinney is a font forensics specialist and type designer, who has created fonts for Adobe and Google. He helped lead Adobe’s conversion of their font library to OpenType in his time there (1997–2008). Phinney is also involved in the business of type, having been product manager for fonts at Adobe and Extensis, and CEO of FontLab. He has four patents, an MS in printing/typography from RIT, and an MBA from UC Berkeley. Phinney served on the board of ATypI from 2004–20, and 2023–25. He was at various times President, VP, Treasurer and Secretary, served on many ATypI committees, and was involved in conference program selections for almost all the ATypI conferences in this time, including often being curator or co-curator of font technology portions of the program. Phinney did his Master’s thesis on “Extreme Form Change in Multiple Master Fonts,” a precursor to modern variable font technology. He designed Adobe Original typeface Hypatia Sans, and his team’s open-source typeface Science Gothic is a 4-axis variable font commissioned by Google Fonts. He developed and maintains a variable font version of Google’s Material Design icons for Google, with Vassil Kateliev, with over 3000 icons. Posts: 3,085There exist plenty of free MP4 > GIF converters, to go with that. Here is one: https://www.adobe.com/express/feature/video/convert/mp4-to-gif1
-
Justin Penner Justin Penner he/him Type designer Vancouver, Canada https://justinpenner.ca/ Posts: 66Adam 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.
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(); } }); } });
7 -
@Justin Penner, thank you! I haven't had time to play around with your script yet, but I can definitely use it.0
-
@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
0 -
Dave Crossland Dave Crossland he/him Google Font Expert Denver, Colorado, USA fonts.google.com I free fonts Posts: 1,505Varifont is heroic and has many impressive hacks to work at all
0 -
@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?
0 -
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!5
-
Thomas Phinney Thomas Phinney he/him or they/them Font Detective LLC Font-related forensics, type design, font production, general typography expertise. Portland, OR, USA https://thefontdetective.com Thomas Phinney is a font forensics specialist and type designer, who has created fonts for Adobe and Google. He helped lead Adobe’s conversion of their font library to OpenType in his time there (1997–2008). Phinney is also involved in the business of type, having been product manager for fonts at Adobe and Extensis, and CEO of FontLab. He has four patents, an MS in printing/typography from RIT, and an MBA from UC Berkeley. Phinney served on the board of ATypI from 2004–20, and 2023–25. He was at various times President, VP, Treasurer and Secretary, served on many ATypI committees, and was involved in conference program selections for almost all the ATypI conferences in this time, including often being curator or co-curator of font technology portions of the program. Phinney did his Master’s thesis on “Extreme Form Change in Multiple Master Fonts,” a precursor to modern variable font technology. He designed Adobe Original typeface Hypatia Sans, and his team’s open-source typeface Science Gothic is a 4-axis variable font commissioned by Google Fonts. He developed and maintains a variable font version of Google’s Material Design icons for Google, with Vassil Kateliev, with over 3000 icons. Posts: 3,085
0 -
A new After Effects plugin has arrived: https://supa.supply/varietyHaven't tried yet, I'm curious how it stacks up against Varifont
2 -
Just adding https://tdbr.xyz/font-animator to the thread5
-
Igor Petrovic Igor Petrovic Nostalgic Dolphin Studio Independent Type Designer Belgrade, Serbia https://nostalgicdolphin.com/ An independent type designer focused on quality over quantity. A careful craftsman and researcher with a decade-long theoretical and practical experience. Specialized in making highly unique display typefaces with strong yet refined personalities that celebrate traditional typographic values of balance, proportion, rhythm, consistency, curve quality, and spacing. Designs outstanding type specimens. Founded "Nostalgic Dolphin" studio that specializes in branding and custom type design. Works as a consultant for Cyrillic script and offers mentorship service for beginner-to-intermediate type designers. Writes on the studio's blog. Critical thinker interested in philosophy and psychology (overlapping areas in particular). Audio producer (indie/gothic/synth pop). Posts: 331Cavalry (2.2) now supports OT features, as well as some other typographic tools:
https://www.youtube.com/watch?v=pC-aQfaT5ag&ab_channel=Cavalry
3
Categories
- All Categories
- 46 Introductions
- 3.9K Typeface Design
- 484 Type Design Critiques
- 560 Type Design Software
- 1.1K Type Design Technique & Theory
- 650 Type Business
- 846 Font Technology
- 29 Punchcutting
- 518 Typography
- 119 Type Education
- 322 Type History
- 77 Type Resources
- 110 Lettering and Calligraphy
- 31 Lettering Critiques
- 79 Lettering Technique & Theory
- 545 Announcements
- 88 Events
- 113 Job Postings
- 170 Type Releases
- 173 Miscellaneous News
- 275 About TypeDrawers
- 53 TypeDrawers Announcements
- 120 Suggestions and Bug Reports