rendering dynamic text with superscript inside Lottie animation

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

MIT License

30.38k stars 2.87k forks source link

rendering dynamic text with superscript inside Lottie animation #2337

Open delasierra opened 3 years ago

delasierra commented 3 years ago

Hi,

Is there any way to render HTML text inside Lottie without parsing the SVG? We currently are rendering dynamic text by updating the JSON file but need to add superscript to them.

Bodymovin split the text into independent tag per charancter, and parsing does not seem very efficient. Other option is substitute the text container content with a foreignObject to inject the HTML text.

Does anyone have a better/cleaner idea to do this?

Thanks!

bodymovin commented 3 years ago

Hi, the player doesn't split the text into individual characters if the text doesn't have animators. Can you share the .aep so I can take a look?

delasierra commented 3 years ago

Hi, thanks for the fast answer.

The text has a simple animation to it, just fade and small horizontal translation.

Using foreignObject would force us to re-style the text. We have many animations so we are considering to first parse the JSON text looking fo HTML tags, store the index of the characters that needs to be rendered as superscript, remove the HTML tags at JSON level and then look for the stored index in the SVG to apply superscript styles to them.

Attached the AE and JSON files. Thanks! animation.zip

bodymovin commented 3 years ago

yes, when using text instead of glyphs, the text gets parsed into separate tags so it renders correctly. Are you planning to use superscript to all text element or single characters?

delasierra commented 3 years ago

Hi, I will only apply superscript to some characters

Adric47 commented 1 year ago

Hey, how did you manage to solve this ? I'm trying to work with superscript but my text is not displayed as expected.. Something #delasierra mentioned is that:

Using foreignObject would force us to re-style the text. We have many animations so we are considering to first parse the JSON text looking fo HTML tags, store the index of the characters that needs to be rendered as superscript, remove the HTML tags at JSON level and then look for the stored index in the SVG to apply superscript styles to them.

I think that is what I should do to solve my problem, but I'm not very familiar with this and I don't know where to start.. Could you help me please?