Fix for text layers without animation not rendering as a single <tspan>

[saadbruno]

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:

[ybosse]

can you teach me how to modify lottie.js？Let the text become a whole label

[B-u-s-h]

Sorry, but I do not understand if this bug has been fixed now or what I would have to do to get text rendered as a single tag. With the newest bodymovin plugin, I still have this problem. Thanks a lot for any help!

[ybosse]

I've tested the above method but it doesn't seem to work

[B-u-s-h]

Ok, thanks. Then I wonder if it would be useful to open another conversation since the title of this conversation ("fix") seems to be misleading.

I would like to have text rendered in one tag because of spacing problems between letters:

In this example (After Effects, Bodymovin plugin, Noto Sans Display font) the first line was outlined in After Effects to show how the text should appear. The second and third lines are texts styled with linked Google fonts. Unfortunately, there is strange spacing between the letters.

Perhaps there is another workaround for this problem?

Why do you want to get the text in one tag?

[saadbruno]

Then I wonder if it would be useful to open another conversation since the title of this conversation ("fix") seems to be misleading.

The title is not misleading. This is a pull request which attempts to fix the issue. It depends on other people to actually test if this pull request fixes the issue, and the owner of the Lottie-web repo to merge this into the main branch and release a new version. That's how open-source projects work.

If you wanna test if my changes actually work, you have to build lottie-web from the pull request, or the fork itself:

• clone the fork
• run npm run build
• check the build folder for the player lottie.min.js file

Another option is to use lottie-web v5.8.1, which is and older version that doesn't contain this bug by getting it in one of the following ways:

• github release
• cdnjs
• if you're using node, then npm install lottie-web@5.8.1

[ybosse]

Can you give me a fixed Lottie.js player？

[B-u-s-h]

Thank you saadbruno! Sorry, as you certainly noticed, I'm not on the coding but on the design side of the world...

Samuel Osborne who works at Lottiefiles made a video tutorial "Dynamic Text And Font With Lottie Animations" in 2021 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. His Lottie file and the code is on codepen: https://codepen.io/Osbro/pen/jOLdBxb

Hello Youtube :-)

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

Does that mean, it worked in older bodymovin versions? Or do we have some AE presets that add animators to text layers by default, making bodymovin to split up text in single characters?

I produce quite complex interactive information visualizations with a lot of text. If lottie could handle text (formats) better, it would put it on a whole new level. It's a pity...

[Spo-oky]

I can confirm that all text is on a tspan.

But as soon as I uncomment: data.singleShape = true; all my images get out of place and stay on Top:0 and Left:0.

Is there a way that I can fix this?