Integrating Lottie Animations into Mobile Apps

Integrating Lottie animations into mobile apps requires careful optimization. Our certified engineers guarantee smooth integration. A designer passed a .json file from After Effects via Bodymovin plugin. We added LottieAnimationView in the layout, specified the file path — seemed ready. In practice, first testing showed: animation stutters on Xiaomi with Android 9, doesn't play on Samsung with API 21, and on iOS consumes 40 MB of memory on a single loading screen. Without integration experience, debugging such issues takes days. To integrate Lottie on iOS, use LottieAnimationView; on Android, also use LottieAnimationView. Our engineers with 10+ years of experience have solved similar problems in 40+ projects. Typical cost ranges from $200 to $800 depending on complexity.

Typical mistakes when integrating Lottie

First, using an unoptimized JSON. Designers often export animations with excessive layers, unused assets, and raster images (base64) inside the file. Typical size of such animation: 800 KB–2 MB. Parsing such JSON on the main thread causes noticeable cold start delay — up to 200 ms on mid-range devices.

Second, ignoring hardware capabilities. Lottie hardware acceleration on Android is crucial for smooth performance. Complex Bodymovin effects (merge paths, gradients, track mattes) on Android API 21–25 are rendered software via Canvas, not hardware. FPS drops from 60 to 15 on mid-range devices. On iOS, a similar situation with merge paths. As noted in the Lottie iOS documentation, CoreAnimation works best from iOS 13+, but merge paths may still cause software rendering.

Third, lack of caching. In Flutter, if you don't reuse LottieComposition, each load decodes JSON anew, increasing render time by 30–50%.

Why Lottie animations jitter on older devices?

lottie-android since version 6.x requires at least API 21, but full support for Bodymovin effects is only from API 26+. Gradients, masks, track mattes — on API 21–25 some effects render via Canvas instead of hardware acceleration. Result: FPS drops from 60 to 15 on mid-range devices with complex animation.

On iOS, similar trap: lottie-ios 4.x uses CoreAnimation layers for most effects, but with merge paths or complex masks it switches to CALayer with software rendering. This isn't obvious from documentation — you realize only when you see CoreGraphics instead of Metal in GPU usage in Instruments.

Second scenario for problems: size of .json file. An onboarding animation of three screens can weigh 800 KB–2 MB if the designer forgot to remove unused assets or exported with raster images inside JSON (base64-encoded). Parsing a two-megabyte JSON on the main thread at startup is a noticeable delay on cold start.

How to optimize JSON without quality loss?

Before integration, we run it through lottie-compress CLI or LottieFiles Optimizer. Typical result: 40–60% size reduction without quality loss. We replace raster images inside JSON with external references via imagesDictionary. This is especially important for loading screens and onboarding, where file size directly impacts startup speed. In one project, we reduced animation from 1.8 MB to 760 KB, cutting loading time by 30%.

Comparison of Lottie with alternatives

Lottie is 10x more compact than APNG with the same visual quality — it's the best choice for loading animations.

Step-by-step integration guide

1. Optimize JSON. Before integration, we always compress (see above).

2. Android (Kotlin).

// build.gradle implementation "com.airbnb.android:lottie:6.4.0" val animationView = LottieAnimationView(context) animationView.setAnimation(R.raw.loading_animation) animationView.repeatCount = LottieDrawable.INFINITE animationView.enableMergePathsForKitKatAndAbove(true) // API 19+ animationView.play() 

enableMergePathsForKitKatAndAbove(true) enables software rendering of merge paths on older API — without it, some animations simply don't render correctly. For performance-critical cases, use setRenderMode(RenderMode.HARDWARE) — forced hardware-accelerated rendering.

3. iOS (Swift).

// Package.swift or SPM: com.airbnb.ios/lottie-ios 4.x import Lottie let animationView = LottieAnimationView(name: "loading_animation") animationView.loopMode = .loop animationView.contentMode = .scaleAspectFit animationView.play() 

For SwiftUI — LottieView from lottie-ios 4.2+:

LottieView(animation: .named("loading_animation")) .playing(.toProgress(1, loopMode: .loop)) 

4. Flutter.

// pubspec.yaml: lottie: ^3.1.0 Lottie.asset( 'assets/animations/loading.json', repeat: true, fit: BoxFit.contain, ) 

In Flutter, LottieBuilder caches the decoded LottieComposition — important to reuse via LottieComposition.cache when the same animation appears multiple times.

What's included in the work

We also train your developers on basic maintenance. We guarantee optimal performance on all target devices. Budget savings on subsequent refinements can reach up to 40%, translating to $200–$800.

Process of work

We start with analysis: examine the original JSON, test on target devices. Then design the solution — optimize, split into parts, or change format. Next, integration: add code, configure control. After that, testing on 5+ scenarios, including low-end devices. We finish with deployment to App Store and Google Play with monitoring.

Timelines and cost

Basic integration of one Lottie animation on one platform — 2–3 hours including testing and optimization. If there are multiple animations or integration on both platforms with code control (pause, rewind, completion callback) — from half a day to a day. Pricing is determined after analysis. Typical cost ranges from $200 to $800 depending on complexity. Contact us to evaluate your project — we'll analyze the animation and propose the optimal solution. Get a consultation with a free analysis.