emotesize

Lottie looks wrong on Android or iOS

· 7 min read

lottie-web, lottie-android and lottie-ios are separate renderers. The browser preview on a marketplace page is lottie-web, which supports the most features, so "it works on the website" says little about your app. Drop the file into the Lottie Inspector to see what it uses.

Something stops moving

Cause: expressions. lottie-android and lottie-ios don't run After Effects expressions (wiggle(), loopOut() and the rest), so those properties freeze at their first value.

Fix: in After Effects, select the property and use Animation › Keyframe Assistant › Convert Expression to Keyframes, then export again.

A shadow, glow or blur is missing

Cause: effects and layer styles. Most effects and almost all layer styles are dropped on mobile. Support for a few, such as drop shadow and Gaussian blur, depends on the player version.

Fix: build the shadow from a shape layer with feathered masks, or bake that part into an image.

Shapes are missing or overlap on Android

Cause: merge paths, which lottie-android leaves off by default.

// Views
animationView.enableMergePathsForKitKatAndAbove(true)
// Compose
LottieAnimation(composition, enableMergePaths = true)

Merge paths are also slow, so where you can, replace them with pre-merged shapes in After Effects.

Colours look wrong where layers overlap

Cause: blend modes such as Multiply, Screen or Soft Light. They work in lottie-web's SVG renderer and are ignored or limited on mobile.

Text is missing or in the wrong font

Cause: text layers need either embedded glyphs or the font on the device. Ship the font files with the app (Android: assets/fonts/, matched by family name). Or convert the text to shapes, which also stops it changing between devices.

Images are missing

Cause: the JSON references image files ("u": "images/", "p": "img_0.png") that weren't bundled. On Android, call setImageAssetsFolder("images/") and put the images in assets/images/. Simpler: embed them, or use a .lottie file, which carries its images. Drop the JSON and its images into the Lottie Compressor together and it embeds and compresses them in one go.

It stutters on cheaper phones

  • Large images: memory depends on pixel size, not file size. Export images at their displayed size.
  • Many track mattes and masks: each renders offscreen. Reduce them, or bake that part into an image.
  • Rendering mode: on Android, test RenderMode.HARDWARE against SOFTWARE. On iOS, the Core Animation rendering engine is faster but falls back to the main thread for some features.