Lottie: What It Is, Animations, and How It Works on Mobile Platforms

What Is Lottie and How It Works

Lottie is an open-source library created by Airbnb in 2015 for rendering vector animations in real time. A developer creates an animation in Adobe After Effects, exports it via the Bodymovin plugin to JSON, and Lottie plays that JSON on the target device by interpreting layers, shapes, transparency, and animation curves.

Unlike video files or GIFs, Lottie is resolution-independent — the animation renders as vectors and looks identical on devices with any DPI. A JSON animation is on average 5–10 times smaller than an equivalent GIF or video, which is critical for mobile applications with limited bandwidth.

According to Airbnb Engineering, adopting Lottie reduced animation size in the app by 80% compared to Precomposed video sequences, while maintaining 60 FPS across all supported devices. Today, Lottie is supported on iOS, Android, Flutter, React Native, Web (HTML Canvas and SVG), and desktop platforms.

Lottie’s performance comes from native rendering: on iOS it uses Core Animation with CALayer, on Android — its own Canvas renderer in C++ via JNI. This allows complex animations with dozens of layers to play without frame drops even on mid-range devices. Unlike WebView-based solutions (GIF, APNG, video), Lottie does not create a separate rendering process and does not consume extra memory for frame decoding.

Use Lottie for loading indicators, icons with micro-interactions, onboarding screens, and festive promo animations where smoothness and small file size matter.

The Lottie ecosystem includes official players for eight platforms, the LottieFiles editor for browser preview, and a marketplace with thousands of ready-made animations. A developer can download a JSON file, integrate it into a project, and adjust colors and speed to match the design system without opening After Effects. LottieFiles also provides an SDK for faster integration with the ability to load animations via an AIR link, allowing animation updates on devices without publishing a new app version to the App Store or Google Play.

Lottie JSON Format and Bodymovin

The Lottie JSON schema is an open standard for describing vector animation, consisting of three levels: composition, layers, and shapes. The composition contains metadata: canvas size, frame rate, and duration.

JSON Structure

The root JSON object contains a layers field — an array of animation layers. Each layer can be a Shape Layer, Image Layer, Text Layer, or PreComp Layer. For each layer, transform properties are defined: position, scale, rotation, and opacity tied to keyframes.

const animationData = {
    "v": "5.5.2",
    "fr": 60,
    "w": 200,
    "h": 200,
    "layers": [{
        "ty": 4,
        "nm": "Circle",
        "shapes": [{
            "ty": "el",
            "p": { "k": [100, 100] }
        }]
    }]
}

Keyframes are defined as arrays with timestamps, values, and Bezier curves for interpolation. Bodymovin automatically converts After Effects curves to a Lottie-compatible format, preserving timing and easing functions with frame-level accuracy.

Bodymovin — Export Plugin

Bodymovin is an Adobe After Effects extension that exports a composition to a Lottie JSON file. The plugin supports most After Effects features: shapes, masks, effects, text layers, and tracking. Limitations apply to 3D layers and some plugins — they are not exported and require simplifying the animation to 2D.

Lottie Integration on iOS

On iOS, Lottie is integrated via Swift Package Manager, CocoaPods, or Carthage. The main classes are LottieView for SwiftUI and LottieAnimationView for UIKit. The lottie-ios package supports animations from the bundle, network, and Data objects.

LottieView in SwiftUI

LottieView is a View component for SwiftUI that accepts a JSON file name from the bundle or a URL for network loading. The animation plays automatically at the specified speed and loop count.

import Lottie

LottieView(animation: LottieAnimation
    .named("loading_spinner"))
    .loopMode(.loop)
    .animationSpeed(1.5)
    .frame(width: 100, height: 100)

For UIKit, LottieAnimationView is used, configurable via Interface Builder or programmatically. The view supports all animation states: play, pause, stop, as well as a progress bar for data loading. LottieAnimationView can be embedded in UITableViewCell or UICollectionViewCell for animated icons in lists — when scrolling, the animation pauses, and when the cell appears on screen, it resumes, saving CPU and GPU resources.

Modern iOS development actively uses Lottie with SwiftUI to create animated onboarding screens and interactive elements: as the user scrolls, the animation progress syncs with the scroll position via ScrollViewReader. This creates a parallax effect where the animation continuously follows the user’s finger movement, boosting engagement without heavy video files.

Playback Control

The Lottie player on iOS provides an API for playback from a specific frame to another frame, changing fill/stroke colors via KeyPaths, and listening to events through LottieAnimationDelegate. You can pause animations during scrolling and resume when stopped to optimize performance.

Lottie Integration on Android

On Android, Lottie is added via the Gradle dependency com.airbnb.android:lottie. The main component is LottieAnimationView, which can be placed in XML layout as a regular View and configured via attributes or programmatically.

@Composable
fun LoadingAnimation() {
    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.loading)
    )
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )
}

In XML layout, LottieAnimationView is configured via attributes: lottie_rawRes (reference to JSON in res/raw), lottie_autoPlay, lottie_loop. Network loading is supported via lottie_url or programmatically through setAnimationFromUrl. The Android version of Lottie uses its own Canvas renderer, independent of hardware acceleration.

Loading from RawRes and Network

For static animations, JSON is placed in res/raw and referenced via RawRes. For dynamic animations, Lottie loads JSON from a URL or Data object with a progress callback showing the download percentage. The Lottie cache automatically keeps loaded animations in memory to avoid re-downloading on subsequent renders.

Lottie for Android supports animation in RecyclerView via LottieAnimationView embedded directly in list items. For performance optimization, it is recommended to use setAnimation with lazy loading and disable animation for off-screen elements through the RecyclerView.OnChildAttachStateChangeListener callback. This prevents FPS drops when scrolling long lists with animated icons.

Customizing and Controlling Lottie Animations

Lottie provides a powerful API for customizing ready-made animations without modifying the original After Effects file. This allows adapting a single animation to different themes, colors, and app sizes.

Changing Colors via KeyPath

Fill and stroke colors can be changed at runtime via KeyPath — a string path to an animation element. For example, to change a cart icon’s color from red to blue, simply find its KeyPath and apply the new value. This eliminates the need to store multiple versions of the same animation for different color schemes.

Speed and Progress Control

Each Lottie animation can be controlled by speed (animationSpeed), progress (setProgress), and frame range (play(fromFrame:toFrame:)). Progress mode allows syncing the animation with a scroll gesture: the further the screen is scrolled, the further the animation progresses — a popular technique for onboarding and parallax effects.