Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

saadbruno
Copy link

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 #2412 (comment), 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:

tSpan = this.textSpans[i].span || createNS('tspan');

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:

if (!this.textSpans[i]) {
this.textSpans[i] = {
span: null,
glyph: null,
};
}

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

@saadbruno saadbruno changed the title Fix for text without animation not rendering as a single tspan Fix for text layers without animation not rendering as a single <tspan> Jul 28, 2023
@ybosse
Copy link

ybosse commented Oct 28, 2023

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

@B-u-s-h
Copy link

B-u-s-h commented Jan 8, 2024

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
Copy link

ybosse commented Jan 8, 2024

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

@B-u-s-h
Copy link

B-u-s-h commented Jan 8, 2024

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:

Bildschirmfoto 2024-01-07 um 12 55 06

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
Copy link
Author

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:

@ybosse
Copy link

ybosse commented Jan 8, 2024

Can you give me a fixed Lottie.js player?
image

@B-u-s-h
Copy link

B-u-s-h commented Jan 10, 2024

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
Copy link

Spo-oky commented Jun 3, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Text exports one character per <text> element
4 participants