Dynamic text in compose displays every third letter of the string

[vaso92]

Checklist

My animation doesn't use any unsupported features. ✅ I know what part of my animation doesn't work. ✅ I have created a simplified version of my animation ✅ I have attached the AEP file (as a zip file so it can be attached) that only has the part of the animation that doesn't work. - I don't know how aep files work but the full json is linked and the text issue seems to happen with any animation

The dynamic text set via LottieProperty.TEXT takes every third letter from the string. Snippet below is the code used to show the lottie and the lottie.json. The result is that EEE is being shown instead of BYEBYEBYE

version=6.0.1

API 30 Pixel 4 emulator

     val composition by rememberLottieComposition(
        LottieCompositionSpec.RawRes(R.raw.lottie),
      )

      val dynamicProperties = rememberLottieDynamicProperties(
        rememberLottieDynamicProperty(
          property = LottieProperty.TEXT,
          "BYEBYEBYE",
          "WELCOME"
        )
      )

      Column(Modifier.fillMaxSize()) {
        LottieAnimation(
          composition = composition,
          iterations = LottieConstants.IterateForever,
          dynamicProperties = dynamicProperties
        )
      }

Used lottie: https://assets4.lottiefiles.com/temp/lf20_fw4v8s.json

[ArthurVimond]

Hi @vaso92,

This happens because you exported your animation with the text glyphs option enabled from After Effect's Bodymovin. As a result, if you check the content of the "chars", you can see that it only exported 6 characters: W, E, L, C, O and M. In that case, only those 6 characters can be used to draw your text.

To fix it, you have 2 options:

• In your original animation, you would need to include all the characters you want, so the exported animation JSON will include those glyphs in the "chars" field.
• Export the Lottie animation without enabling the text glyph option or delete the "chars" field (both key and value) or leave it as an empty array [] and instead provide a custom font, with the FontAssetDelegate class (cf. https://github.com/airbnb/lottie-android/blob/master/lottie/src/main/java/com/airbnb/lottie/FontAssetDelegate.java).

Let me know if something is still unclear.

NB: Maybe the Lottie Compose APIs are a bit different from the original LottieAnimationView (as I never tried Lottie Compose).

[gpeal]

@ArthurVimond is correct here, thanks for explaining this to them! This is not related to Compose though, Compose and Views share the same code path here.