Font misplaced - Bodymovin - Adobe

General
,
1

Hello folks!

I noticed after the passage to html that when the text as set on softwares like photoshop or after effect and exported by body movin, most of the time is appearing with a Y pxl offset.
So basically I need to modify the template in Adobe to have it shown in the correct position in the consumer.
I tried on centering or moving around the edges of the text instance the anchor point but looks like does not have any effect.
Has any one experienced this strange behaviour using body movin or knows what I am doing wrong?
Thanks you and cheerio!

2

I see it, if it faux bold is used in After effects, then its off by 2px in the y axis, but not if its “plain”. How is the font loaded?

1 Like
3

Thank you for your feedback.
The font is bold. Ok then it is the actual font of this template the issue.
A bit annoying eheh
Thank you :slight_smile:

4

If you export the font as glyph you shouldn’t have this issue.
It only exports the characters used in the animation so you will need a text layer off-screen with all the characters in that you may need, it does also take a bit longer to export!

5

Hi Jon,
text is data driven so in my case I cannot use your suggestion.
Thanks!

6

In the off screen area type all the upper/lower case characters, numbers, symbols you could ever need so their glyphs are generated for use when you send the data through.

7

Use a layer, that is visible, but moved outside of view, if you hide it, it will not be exported.

1 Like
8

As nickb and didi have said, create a text layer that is visible but is positioned off-screen and enter in all characters you need.
If you use multiple fonts or different variants (bold, italic) this will have to be done for each variant.

I use this string (note there is a space after the !). You may want to add or remove some characters if you think you may/may not need them.

! "#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~£ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝ

If using this glyph method, you cannot simply change the text like you would with a font file (for example document.getElementsByClassName(id)[0].getElementsByTagName('tspan')[0].innerText = 'Your text data...'; )

You would need to use the lottie updateDocumentData() method → TextLayer.updateDocumentData · airbnb/lottie-web Wiki · GitHub
This will only visually update the text if the animation is playing. If it’s paused it will visually update when the animation is next played.
To get around this you can play the animation for 1 frame when you update the text, for example

anim.playSegments(
  [
    anim.firstFrame + anim.currentFrame - 1,
    anim.firstFrame + anim.currentFrame + 1,
  ],
  true
);
// Issue with `currentFrame - 1`. Goes back 1 frame each time. https://github.com/airbnb/lottie-web/issues/2613
// Resolved by doing `currentFrame - 1` to `currentFrame + 1`