# After Effects text layers rendered as single caracters

**URL:** <https://forum.lottiefiles.com/t/after-effects-text-layers-rendered-as-single-caracters/5167>\
**Category:** Lottie Plugins\
**Created:** [December 20, 2023, 5:59pm UTC](https://forum.lottiefiles.com/t/after-effects-text-layers-rendered-as-single-caracters/5167 "2023-12-20T17:59:59Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joh](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/joh/32/2816_2.png) [@Joh](https://forum.lottiefiles.com/u/Joh)\
**Post date:** [December 20, 2023, 5:59pm UTC](https://forum.lottiefiles.com/t/after-effects-text-layers-rendered-as-single-caracters/5167/1 "2023-12-20T17:59:59Z")

</div>

Hello,

When rendered into lottie files, text layers from After Effects are split up in single characters (every character becomes an SVG-element). There are no animators on the text and the issue happens with the lottiefiles and the bodymovin plugin. It also happens both to point text and paragraph text.

This adds to file size and the text cannot be modified by code dynamically.

Here is an example:  
[https://lottie.host/embed/3bc092af-6085-435b-85f2-1bfbd3aab97d/TsudIAoFSb.json](https://lottie.host/embed/3bc092af-6085-435b-85f2-1bfbd3aab97d/TsudIAoFSb.json)

Thanks a lot for your help!

---

<div class="post-metadata">

**Author:** ![vd.oldfriend](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/vd.oldfriend/32/2988_2.png) [@vd.oldfriend](https://forum.lottiefiles.com/u/vd.oldfriend)\
**Post date:** [January 18, 2024, 8:56pm UTC](https://forum.lottiefiles.com/t/after-effects-text-layers-rendered-as-single-caracters/5167/2 "2024-01-18T20:56:06Z")

</div>

Hello, @Joh.

Did you try to uncheck in the bodymovin render settings option of converting fonts to shapes?

![image](https://canada1.discourse-cdn.com/flex030/uploads/lottiefiles/original/2X/1/18e910a634f67211b408073ff306f6cb2515804e.png)

---

<div class="post-metadata">

**Author:** ![Joh](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/joh/32/2816_2.png) [@Joh](https://forum.lottiefiles.com/u/Joh)\
**Post date:** [January 19, 2024, 8:27am UTC](https://forum.lottiefiles.com/t/after-effects-text-layers-rendered-as-single-caracters/5167/3 "2024-01-19T08:27:09Z")

</div>

In my case, it’s a project with quite a lot of text. Converting it into shapes would make the file too big.

It seems to be a bug in the Lottie player (after lottie-web v5.8.1) for which someone proposed even a fix:

> <https://github.com/airbnb/lottie-web/pull/3020>
>
> This should fix #657 #2358 #2412 #2866 #2961 #3013
> 
> This fixes the issue where… a piece of text without character-level animation would not render as a single \`\<tspan\>\` tag on the DOM, which is a regression on version 5.9.0.
> 
> As I mentioned on https://github.com/airbnb/lottie-web/issues/2412#issuecomment-1654745934, it seemed that the piece of code that defined the text as a \`singleShape\` was commented out, which means the text would never render as a single \`\<tspan\>\`.
> 
> This is because there was a change to this line:
> https://github.com/airbnb/lottie-web/blob/14dc0cb12d17158900165fa5f7beae7d77887029/player/js/elements/svgElements/SVGTextElement.js#L133
> \`this.textSpans\[\]\` is empty in some cases, which means that \`this.textSpans\[i\].span\` doesn't exist, breaking the condition, and then the text wouldn't render.
> 
> Seems like this is accounted for with this condition:
> https://github.com/airbnb/lottie-web/blob/14dc0cb12d17158900165fa5f7beae7d77887029/player/js/elements/svgElements/SVGTextElement.js#L139-L144
> 
> But this comes AFTER the previously mentioned line, which creates the bug.
> 
> This PR fixes this issue, and the text renders as a single \`\<tspan\>\` again:
> !\[image\](https://github.com/airbnb/lottie-web/assets/23201434/8c65873f-4f24-4481-89da-0822d8d5ba7d)

But I don’t know if it will be included in the next update. It doesn’t seem so…

It’s a pity! Better text handling would put Lottie to a whole new level!

---

<div class="post-metadata">

**Author:** ![vd.oldfriend](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/vd.oldfriend/32/2988_2.png) [@vd.oldfriend](https://forum.lottiefiles.com/u/vd.oldfriend)\
**Post date:** [January 22, 2024, 11:36am UTC](https://forum.lottiefiles.com/t/after-effects-text-layers-rendered-as-single-caracters/5167/4 "2024-01-22T11:36:46Z")

</div>

Just let us know please did you try to **UNCHECK** the pointed option to avoid converting fonts to shapes or not. By default, it is set to a checked state.

---

<div class="post-metadata">

**Author:** ![Joh](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/joh/32/2816_2.png) [@Joh](https://forum.lottiefiles.com/u/Joh)\
**Post date:** [January 22, 2024, 12:30pm UTC](https://forum.lottiefiles.com/t/after-effects-text-layers-rendered-as-single-caracters/5167/5 "2024-01-22T12:30:03Z")

</div>

Hello,

Yes, I unchecked the converting to shape option to create the example above.

And the text is rendered as SVG-Text. The problem is, though, that the text is not in a single tspan-tag, but every single character is in a text-tag. Here is the character “P”:

text stroke-linecap=“butt” stroke-linejoin=“round” stroke-miterlimit=“4” style=“display: inherit;” xml:space=“preserve” transform=“matrix(1,0,0,1,-433,-268.0003967285156)” opacity=“1”\>P\</text

This causes spacing issues between the characters, and it isn’t possible to modify text dynamically, as it was possible in the past.

Sam (SVGenius) who works at Lottiefiles now made a video tutorial “Dynamic Text And Font With Lottie Animations” in 2021

[![](https://canada1.discourse-cdn.com/flex030/uploads/lottiefiles/original/2X/e/e781fbc73dda873d154c7c20b22ac733caf2e34b.jpeg "Dynamic Text And Font With Lottie Animations") ](https://www.youtube.com/watch?v=Ik4vOoIeIPE)

He shows how he creates text in AE, exports it with bodymovin and gets a Lottie file with text in a tspan tag that can be modified dynamically.  
His Lottie file and the code is on codepen (link under the video)

I tried to reproduce the exact same file, but always got text split up in single characters.

Could anyone reproduce Sam’s example with current After Effects, Bodymovin and Lottie Player versions (January 2023)? That would be very interesting.

Thanks a lot!

---

<div class="post-metadata">

**Author:** ![Saar](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/saar/32/3710_2.png) [@Saar](https://forum.lottiefiles.com/u/Saar)\
**Post date:** [May 30, 2024, 3:50pm UTC](https://forum.lottiefiles.com/t/after-effects-text-layers-rendered-as-single-caracters/5167/6 "2024-05-30T15:50:30Z")

</div>

same issue here  
cannot get to export text from AE as a single element no matter the settings. it always comes out as separate letters

---

<div class="post-metadata">

**Author:** ![Olle\_Soprani](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/olle_soprani/32/2816_2.png) [@Olle\_Soprani](https://forum.lottiefiles.com/u/Olle_Soprani)\
**Post date:** [July 6, 2024, 12:02pm UTC](https://forum.lottiefiles.com/t/after-effects-text-layers-rendered-as-single-caracters/5167/7 "2024-07-06T12:02:31Z")

</div>

I have the same here!!! Is this a bug or feature?

/os
