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.

Animations in Mobile Apps: Lottie, Rive, Spring, and Reanimated

We've built animations for dozens of projects — from game interfaces to bank-grade applications. We know how to achieve 120 fps even on Android with ProGuard. If an animation stutters, the problem isn't the tool but the approach. Below we show how we choose between Lottie and Rive, why Spring physics beats UIView.animate, and how Reanimated 3 pushes 60 fps on older devices. Get a consultation for your project — we'll assess the animation layer for free.

Why does UIView.animate break on complex scenarios?

UIView.animate(withDuration:) and ObjectAnimator on Android are fine for simple transitions. But as soon as the animation becomes interactive (user drags an element, speed depends on gesture), a different approach is needed.

On iOS, the right tool for gesture-driven animation is UIViewPropertyAnimator. It allows pausing, reversing, and modifying the animation in progress. A typical use case: a bottom sheet that follows the finger, continues with inertia after release, and snaps to the nearest position. With UIView.animate, this is either not possible or requires manual physics.

In SwiftUI, withAnimation works out of the box, but interactivity is limited — there's no direct analog to UIViewPropertyAnimator. A workaround is using .gesture(DragGesture()) + @GestureState + explicit position calculation. Or move to SwiftUI Animations API with Animation.spring(duration:bounce:) from iOS 17.

How does React Native Reanimated bypass the JS bridge?

React Native Animated API executes animations on the JS thread — this causes jank when the bridge is busy. Reanimated 3 solves this with worklets: functions that compile and run directly on the UI thread without crossing the JS bridge.

Example: parallax scroll header. With basic Animated.Value, fast scrolling drops FPS to 40-45 on mid-range Android. With Reanimated using useAnimatedScrollHandler, it stays at a stable 60 fps because all position calculations happen on the UI thread.

Reanimated 3 with useSharedValue, useAnimatedStyle, and withSpring/withTiming is the current standard for animations in React Native. Gesture Handler v2 is tightly integrated: useAnimatedGestureHandler replaces PanResponder and also runs on the UI thread.

Why can Lottie reduce FPS on Android?

Lottie exports After Effects animation as JSON. On iOS with lottie-ios it's stable, but on Android, complex effects (blur, particles, gradients) via Canvas rendering can cause drops to 30-40 fps. The solution: either simplify the animation or use Rive with hardware rendering. We tested: a 5 MB Lottie file with blur on Xiaomi Redmi Note 10 gave 48 fps, while the same animation in Rive (.riv 400 KB) gave 60 fps.

Lottie vs Rive: What to choose for interactive interfaces?

Both tools solve the task of "designer creates animation, developer adds the file." But they differ fundamentally.

The choice is simple: static decorative animation (splash screen, onboarding illustrations) — Lottie. Interactive UI elements with states — Rive. For example, a button with hover, pressed, loading, success states — one Rive animation with four states versus four separate Lottie files.

Spring physics and Hero transitions: how to achieve naturalness?

Spring animation feels natural because it simulates physics — mass, stiffness, and damping. In SwiftUI: Animation.spring(response:dampingFraction:). In Android Compose: spring(dampingRatio = Spring.DampingRatioMediumBouncy).

For Hero transitions (an element "flies" between screens), on iOS use UIViewControllerTransitioningDelegate + UIViewControllerAnimatedTransitioning. In SwiftUI with iOS 17 — matchedTransitionSource + navigationTransition(.zoom). On Flutter — Hero widget, which works out of the box.

How to avoid common mistakes in Hero transitions?

The animation starts fine, but on the target screen the element "jumps" to the final position. The reason: AutoLayout constraints are applied before the animation completes. Solution: call layoutIfNeeded() inside the animation block or use transform instead of frame changes.

What's included: animation layer turnkey

• Integration of Lottie/Rive files into the design system
• Code for gesture-driven transitions (bottom sheets, drawers, carousels)
• Testing on real devices (iOS 15–17, Android 10–14)
• Animation documentation (architecture, state keys)
• Support for design updates (30-day warranty)

We have 5+ years of experience in mobile development, over 30 projects with animations, certified iOS/Android developers.

Timelines

• Basic screen transitions and micro-interactions — 1 week.
• Lottie/Rive integration with design system — 3-5 days after receiving final files.
• Custom gesture-driven interactivity (sheet, drawer, physics carousel) — 1-2 weeks.

Contact us — we'll add animations turnkey in 2 weeks. First consultation is free.