Lottie-web: How to make an adaptive scene for dynamic text?

[goodwin74]

How to make an adaptive scene for dynamic text?

For example, there is a scene with text in the middle.
If you change the text in JSON data anim, the text will go beyond the boundaries of the scene and it will not be visible.
How to make the scene adapt to the size of the text, or the text adjust to the size of the scene?

[Danjuanlab]

https://github.com/airbnb/lottie-web/wiki/TextLayer.updateDocumentData

[goodwin74]

https://github.com/airbnb/lottie-web/wiki/TextLayer.updateDocumentData

The problem is not updating the text. In the fact that after changing it, the text does not fit into the scene and the part becomes invisible.
I wanted the text to decrease in size and always correspond to 90% of the width of the scene, so that the text was adaptive.

I tried using the expression:

layerWidth = thisLayer.sourceRectAtTime(time-thisLayer.inPoint, true).width;
compWidth = thisComp.width;
maximumWidth = compWidth * .9;
percentageOfMaxWidth = maximumWidth / layerWidth * 100;
[percentageOfMaxWidth, percentageOfMaxWidth]

But it only works correctly in AE.

[goodwin74]

There may be other ways to update the text, but so that it does not change in width, but the font size is reduced. Or maybe some other way?

[bodymovin]

Hi, if you are using a paragraph text in After Effects you can use this
https://github.com/airbnb/lottie-web/wiki/TextLayer.canResizeFont
so the font gets resized to always fit the text box

[goodwin74]

Hi, if you are using a paragraph text in After Effects you can use this
https://github.com/airbnb/lottie-web/wiki/TextLayer.canResizeFont
so the font gets resized to always fit the text box

I also thought that this parameter so that the text size corresponded to the borders of the text field. However, for some reason this does not work :(
When set the option to true, nothing changes.

https://jsfiddle.net/tub4kxen/

[bodymovin]

You need to create paragraph texts for this to work, instead of point texts.
By setting the paragraph box size, lottie will know the available area and resize if necessary.

[goodwin74]

You need to create paragraph texts for this to work, instead of point texts.
By setting the paragraph box size, lottie will know the available area and resize if necessary.

@bodymovin thank you so much!! I converted the text to “paragraph text” (in AE) and it worked!