HN Explorer

Ask HN: How can I make beautiful, professional programmatic text animation?

19 points by poeticsilence ↗ HN
I'm building a word game on the side, and I want to artfully and elegantly transform one word into the other, programmatically. The corpus of words is quite large, but there are a finite number of transformation types. (Example transformations would be shuffling or dropping letters)

Everyone seems to be either using something like Adobe After Effects, or the animations themselves tend not to look very organic or soothing and satisfying to the eye.

Is this something that can be done easily in modern CSS and Javascript? Is there any resource, individual, or group you can recommend for either learning from or contracting with to accomplish this?

10 comments

[ 3.2 ms ] story [ 36.0 ms ] thread
armchairhacker
You mean something like this? https://youtu.be/KsKpQLcvNGA?t=828 ("Magic Move by Character" or "Anagram" https://discussions.apple.com/thread/2030384)

I know there are a variety of potential ways to get the position of each character in the DOM using https://developer.mozilla.org/en-US/docs/Web/API/Element/get... and https://developer.mozilla.org/en-US/docs/Web/API/Range/getBo...: e.g. you can make it so that each character is in its own element or draw an invisible "marker" up to the specified character. From there, you can hide the old text, replace the word with absolutely-positioned characters, animate them either with JavaScript or CSS into the new text (which will also be an invisible "marker"), and also fade in/out characters which don't transition like in Keynote Anagram. Idk of any existing resource

poeticsilence
Exactly like this. Thanks for the pointers, and the smooth example video!
JPLeRouzic
I am not at all an expert on this topic but I have used a few Javascript code to display how strokes are painted in Chinese characters.

In Github there is a large list of such text animation projects. Maybe only 5% or 10% are really usable but that gives enough choices.

https://github.com/topics/text-animation

joeld42
As a graphics programmer, my suggestion would be encoding the font into an SDF (signed distance field) texture atlas (there are a lot of tools out there to do this for atlasing text, but it's useful for effects too), then draw both words as SDF and blend between them, and render the words from that. You can use different blend functions and SDFs give you a lot of control and possibilities, and you can do stuff like bias the SDF (add a small positive number) to give it a more blobbly, softer appearance.

here's an example of animating some SDF shapes (the white line is what you'd render as the glyph outline) https://www.shadertoy.com/view/WtVyRt

feel free to email me if you get stuck, i might be able to make a shadertoy example or something

poeticsilence
This is also really fantastic. Very different from the other text animation examples, and perfect for representing when one letter transforms into another.