Animating Text via Webkit

usefuldesign.au's picture

Is it possible to animate characters on a web page via Javascript? I know AJAX can change the text strings, is it possible to use JS to modulate the baseline or sub/superscript function of individual letters? Is there a property for a characters vertical position relative to the baseline of any given piece of text?

Reason for asking is a shortcut to making animated text, like that wobbly effect often used to make digital animation look more analogue. I know I can make a structure in QC of individual glyphs and animate them in various ways but I would still have to manually assign an X position for each glyph (unless using a monospaced freehand looking font if such a font exists). That would require programming the position of each character every time I changed the text string :/.

Any ideas gratefully received. Also if anybody has mastered a Dr Katz-style line wobble CI filter, I'm interested in that too!

Example: http://storyofstuff.org/bottledwater/

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

cybero's picture
Re: Animating Text via Webkit

JSQuery animation - works in Safari [WebKit] see http://api.jquery.com/animate/

usefuldesign.au's picture
Re: Animating Text via Webkit

Thanks, cybero. Looks intersting. Ended up making it in QC first but this will keep Kerning pair values if I can find the correct property to animate. Much nicer typography ;)

Sorry for the double post of topic. Please nuke other thread, kineme:

http://kineme.net/forum/Discussion/DevelopingCompositions/AnimatingTextW...

[edit: nuked.]