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

19 pointspoeticsilence3y ago10 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?

19 pointspoeticsilence3y ago10 comments

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

10 comments · 6 top-level

JPLeRouzic3y ago· 1 in thread

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

poeticsilenceOP3y ago

Thanks, I'll take a look!

joeld423y ago· 1 in thread

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

poeticsilenceOP3y ago

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

armchairhacker3y ago· 1 in thread

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

poeticsilenceOP3y ago

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

netsharc3y ago· 1 in thread

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

poeticsilenceOP3y ago

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!

cbayram3y ago

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...

billconan3y ago

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

j / k navigate · click thread line to collapse

10 comments

10 comments · 6 top-level

JPLeRouzic3y ago· 1 in thread

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

poeticsilenceOP3y ago

Thanks, I'll take a look!

joeld423y ago· 1 in thread

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

poeticsilenceOP3y ago

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

armchairhacker3y ago· 1 in thread

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

poeticsilenceOP3y ago

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

netsharc3y ago· 1 in thread

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

poeticsilenceOP3y ago

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!

cbayram3y ago

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...

billconan3y ago

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

j / k navigate · click thread line to collapse