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.
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.
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
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.
