airbnb / lottie-web

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Slider Expression Control (Number Counter) Exporting Messy

laureneh-byte opened this issue · comments

  • Browser and Browser Version:
    Chrome Version 119.0.6045.123

  • After Effects Version:
    24.0.1 (Version 2)

  • What did you do? Please explain the steps you took before you encountered the problem.
    I created a slider control expression (number counter) for my AE animation and every time I export to JSON the numbers appear stacked on top of each other in an unusual and and illegible manner. I have tried the following render methods (to no success):

  1. Selecting "Convert Expression to Keyframes" in both Lottie and BodyMovin' Export Settings; and
  2. Converting the Expression to Keyframes within the text layer of my composition.
Screenshot 2023-11-11 at 8 48 35 PM
  • What did you expect to happen?
    Based on my understanding from the Wiki, I expected my expression to convert to keyframes in the exported JSON:

"All expression controls are supported. You should have no issues linking any of the supported properties to an expression control."

  • What actually happened? Please include as much relevant detail as possible.
    I've attached a screenshot as I'm having a hard time describing in words what it's doing. I tried researching the issue here and attempted the following actions to resolve (to no success):
  1. Disabled the expression, changed the value of the text layer to something that was not getting rendered (e.g. 0) and reenabled the expression as a workaround to this bug (Source: Issue #2682 ) (failed); and finally,
  2. Created an extra text layer with all the necessary glyphs (Source: Issue #1970 ) (failed)

Thanks for the file. i took a look in After Effects to test exporting it for myself.
Screenshot 2024-02-10 at 1 01 30
Screenshot 2024-02-10 at 1 01 42

for me the numbers to export correctly when i turned off the glyphs setting and turned on the expression ones as you mentioned.

interestingly the round() expression doesnt seem to work when exported. likely because lottieweb is interpolating in the browser between the baked values saved from AE.

how to fix?

Ditch the expressions for the final output, make a copy and bake the text source on your text layers which will give you hold keyframes. this wont get interpolated (see attached after effects file) you can hide the 'live' text layers incase you need to make changes again in the future.

Screenshot 2024-02-10 at 1 16 08

Sport Mode Troubleshoot_lorcan.aep.zip
data.json