Is there a fluent transition possibility for animation font-size in Raphael JS?

Question

So far it seems like it is not fluent, but choppy. E.g. if you have one state attribute with font-size: 14 and want to animate to state with font-size: 16, the

Answer 1

I know of no solution using font-size to modify a text element, but I would probably not take that approach anyway. Instead, I would simply use the cufónized path corresponding to the text in question and scale it manually. Please note that this is noticeably smoother than scaling a text element manually, at least in Firefox.

1. Visit Cufón and convert my preferred font to its vector equivalent, selecting Raphael.registerFont as the customization option;

2. Generate my text using paper.print instead of paper.text. This returns a path element instead of a text element.

3. Zoom the resulting path element using transformation instead of font-size. Since paper.print accepts a font-size as an argument, it is easy to compute the desired scale corresponding to your target font-size.

Here's a rough demonstration showing how it works (I put the text on a backing for easier hovering). I hope you'll pardon its numerous inadequacies; it was produced in a bit of haste.