How do I animate svg text?

[Chris]

Hello,

 

I just figured out that I can save an illustrator file with live text as an svg image with an embedded font! It seems to work in all browsers that support svg. This seems a great way to have the text pixel perfect without having to use a static image (png24).

 

My next thought was to use SplitText, since svg is a dom element with tags and so on. But it's not supported. ;..(  I know "it's a different beast", but at the end of the day it's also just text. Sentences, words, individual letters...

 

Are there plan to supports svg text with SplitText? If not, how would I animate svg text and individual letters otherwise?

 

[OSUblake]

You could use SplitText on some hidden text and then with the update callback map those values to your SVG text. It would probably work better if each letter was in its own group.

[swampthang]

Was searching for how to use GSAP's way cool text plugins inside a master SVG file. I'm having to keep all the animations inside an SVG for export out by frame to video. What update callback are you referring to, Blake? Like, if someone entered some text in an input field (the hidden text source) how do you envision applying the text animations like splitText or whatever and placing them into an SVG?

[OSUblake]

I guess I was waiting for @Chris to respond before going into details. My thinking was that if you're having trouble positioning or animating SVG text, that you could use SplitText on regular text inside a hidden div as a proxy. From there, you could map any changes or animations done on the hidden text to the SVG text.

 

Here's how mapping works. You normalize the values of the source (hidden text) by converting them to a value between 0 and 1. Essentially, a ratio. You then use that ratio to interpolate the values of the destination (SVG text).

 

Here's a simple example using two boxes inside different containers. I'm mapping the animation of the purple box onto the orange box. Even though both boxes and containers use different dimensions, the mapping works out to be the same.

See the Pen 5d439258a9fb08c03c121d41e79cc3ac?editors=0010 by osublake (@osublake) on CodePen