Jump to content
Search Community

How do I animate svg text?

Chris test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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?


Link to comment
Share on other sites

  • 9 months later...

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?

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...