Text not animatable

[webdevotion]

Hello

I can't figure out how to animate my SVG font which I exported from Illustrator.

This is a relevant piece of my javascript:

if (SVG.supported) {
  var draw = SVG( elID );
  new SVG.SVGFont('/fonts/someones-open-sans.svg', function(){
    // callback is called in context of the font

    // lets use the font
    var text = draw.morphText('!').font({
      family: 'OpenSans-Light', // or this.family or just the font-family which is specified in the font
      size:72,
    });

    // animate the text
    text.attr({fill: '#fff', 'fill-opacity': 0.5, stroke: '#fff', 'stroke-width': 1}).animate(3000).attr().text('GFEDCBA');

  });
}

Here is the contents of the SVG file:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve">
<style type="text/css">
	.st0{font-family:'OpenSans-Light';}
	.st1{font-size:72px;}
</style>
<font horiz-adv-x="2048">
<!-- Copyright: Copyright 2017 Adobe System Incorporated. All rights reserved. -->
<font-face font-family="OpenSans-Light" units-per-em="2048" underline-position="-154" underline-thickness="102"/>
<missing-glyph horiz-adv-x="1229" d="M193,1462l841,0l0,-1462l-841,0M297,104l633,0l0,1254l-633,0z"/>
<glyph unicode="!" horiz-adv-x="492" d="M276,377l-61,0l-29,1085l119,0M164,78C164,143 191,176 244,176C299,176 326,143 326,78C326,13 299,-20 244,-20C191,-20 164,13 164,78z"/>
<glyph unicode="?" horiz-adv-x="862" d="M293,377l0,37C293,496 306,563 331,615C356,667 402,723 469,782l91,79C608,902 642,942 663,982C684,1022 694,1068 694,1120C694,1205 666,1272 611,1322C555,1372 482,1397 391,1397C338,1397 289,1391 243,1380C197,1368 147,1349 94,1323l-37,80C130,1435 192,1456 242,1467C291,1478 342,1483 395,1483C517,1483 613,1450 683,1385C753,1319 788,1229 788,1114C788,1069 782,1029 770,995C758,961 741,930 720,901C698,872 672,844 641,817C610,790 576,760 539,729C496,693 464,660 441,631C418,601 401,570 391,537C380,504 375,456 375,391l0,-14M260,78C260,143 287,176 340,176C395,176 422,143 422,78C422,13 395,-20 340,-20C287,-20 260,13 260,78z"/>
<glyph unicode="&#x2022;" horiz-adv-x="770" d="M231,748C231,807 245,852 272,883C299,913 336,928 385,928C434,928 472,912 499,881C526,850 539,805 539,748C539,691 525,647 498,615C471,583 433,567 385,567C337,567 299,583 272,614C245,645 231,690 231,748z"/>
</font>

<text transform="matrix(1 0 0 1 368.835 155.3301)" class="st0 st1">!</text>
<text transform="matrix(1 0 0 1 296.2061 156.8867)" class="st0 st1">?</text>
<text transform="matrix(1 0 0 1 211.4741 154.3506)" class="st0 st1">•</text>
</svg>

The error I get in Safari's console is: Text not animatable.

[Fuzzyma]

you call attr() with no arguments which returns an object with all attributes from the elements.
This returned object of course has no method text(). When you want to your attributes call attr('fill', null) or something.

Or bette for the sake of this example just remove the empty attr()

[webdevotion]

Thanks @Fuzzyma. I can finally see some exclamation marks on my page after I removed attr().

This still throws the error though:

var text = draw.morphText('!').font({
                family: this,
                size:72,
              }); 
text.animate().text('!!!!!');

[Fuzzyma]

Given that this is no browser error message you can search for the string in the code and will soon hit the line were the error is thrown.

  text: function(glyphs){

    if(!this.target().glyphs) throw 'Text not animatable'

    // ...
  }

That means the text you try to animate was not correctly rendered with morphText and therefore cant be animated. morphText usually saves the glyphs it used to render the text on the group elemenet.
However it seems like you are calling animate().text() on an element which has no glyphs saved.
That means it wasnt created with morphText or other weired things happen.

This plugin is still far from ready for production. Its more like a playground to see whats possible.
It never drawed much attention so it is was not developed further.

I am curious: Whats your usecase?

[webdevotion]

Thanks for the insights. I would like to animate paths from glyphs from a slightly edited font ( in Illustrator ) to spice up some of the graphical elements on the pages I'm working on.

End goal would be:

• load font
• use symbols from font like !, ?, <, >, ... as icons on certain elements
• on page load / when in view port animate !, ?, <, >, ... using their paths

Does this make sense or is there another way to achieve this?
Tried to use vanilla svg.js without much success.

[Fuzzyma]

I think in your case (you dont need that much chars) it would be easier to directly animate paths.
Usually this plugin should work for you. I dont see the reason why it doenst.

However, you can use the svg.pathmorphing.js to make svg.js capable of path morphing (this is used by this plugin, too). You can then just morph the glyph paths from a to b. Just remember to flip the glyphs (y axis is wrong) and scale them.

Would be cool, to have your your example in a jsfiddle to find the issue. When you have some time for that I would be glad. I wanted to rework this plugin anyway. Its way to old