Ask HN: How can I make beautiful, professional programmatic text animation? | Hacker News Reader

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

19 pointspoeticsilence10 comments

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?

View on HN

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

Thanks, I'll take a look!

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

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

There are various approached you could take; CSS transition/animation, d3,...

Here is a quick dirty example of shuffling using CSS transition [1] on the left offset. https://jsfiddle.net/h2urfsjb/

It puts each character of a word in its own absolutely positioned span tag and maps its left offset.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transit...

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

Exactly like this. Thanks for the pointers, and the smooth example video!

Maybe Processing? https://openprocessing.org/browse/# (search for "text", select "anytime").

That might do the trick. I'll take a look, but an initial foray gives me hope at that link you sent. Thank you for the suggestion!

I did something similar using https://pixijs.com/

Reply on news.ycombinator.com