Lottie-web: Counter text not working

Created on 2 Feb 2020  路  6Comments  路  Source: airbnb/lottie-web

Tell us about your environment

  • Firefox 71.0 (64-bit):
  • After Effects CC19 + 20:

What did you do? Please explain the steps you took before you encountered the problem.
I created a circle graph using trim paths represent a percentage. I then pick whipped a text layer to the trim paths endpoint and used the Math.round number expression to round up the number.
So when the circle went to 75% the text layer counted up to 75%.
I also tried the same thing using the slider effect on the text layer to make a counter.

What did you expect to happen?
The embedded .json animation to could up from 0% to 75% and stop.

What actually happened? Please include as much _relevant_ detail as possible.
The number starts at zero than flickers different numbers like it's glitching and the ends on either 75% or in some exports it ends on no number. Inspecting the element, it looks as if it should count normally.

Please provide a download link to the After Effects file that demonstrates the problem.

The text is in white so you may need to change the background colour to see it.
Web3v1-Beards.html.zip

All 6 comments

Hi, if you are exporting text as glyphs, you need to provide all the necessary glyphs for it to work.
You should create an extra text layer with all number characters from 0 to 9 and put it outside the workspace so it doesn't get rendered but the glyphs get exported.

Hi, if you are exporting text as glyphs, you need to provide all the necessary glyphs for it to work.
You should create an extra text layer with all number characters from 0 to 9 and put it outside the workspace so it doesn't get rendered but the glyphs get exported.
@bodymovin so lets say I have a full sentence full of text as glyphs. So in order for the glyphs to work correctly I need to have an extra hidden layer with numbers 0-9 and then the sentence glyphs will work? Anytime I want to export glyphs with bodymovin I just need to have an extra layer with literally the numbers 0,1,2,3,4,5,6,7,8,9? Thats it?

@ision-industries you would need to provide all the characters (glyphs) your sentence needs

Thank you so much, I wasn't aware of this. Cheers!

@bodymovin tanks for the clarification but I am still a bit confused. So I will need to have my full sentence as shape layers that are visible layers and I also need to have other shape layers with glyphs 0-9 as hidden layers? I am still slightly confused.

@ision-industries you need a text layer with the characters that your text layer will need.
Usually the range "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" is a common case

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Ipaulsen picture Ipaulsen  路  4Comments

leantide picture leantide  路  3Comments

jumostudio picture jumostudio  路  3Comments

phileastv picture phileastv  路  3Comments

Sandok-voc picture Sandok-voc  路  4Comments