Lottie for Swift: Complete Guide with Examples

Introduction to Lottie for Swift

\n\n

Lottie is a powerful open-source library developed by Airbnb that allows you to render vector animations created in Adobe After Effects on mobile and web platforms. Animations are exported in JSON format (using the Bodymovin plugin) and play in real time without loss of quality.

\n\n

For Swift developers, Lottie opens up endless possibilities: from simple loading indicators and icons to complex full-screen animations, welcome screens, and interactive interface elements. Unlike GIFs or videos, Lottie animations:

\n

\n
• Vector-based — scale without loss of quality on any device.
\n
• Lightweight — JSON files typically weigh between 1 and 50 KB.
\n
• Interactive — you can control playback, speed, color, and progress.
\n
• Cross-platform — the same JSON works on iOS, Android, Web, React Native, and Flutter.
\n

\n\n

This article is a complete guide to using Lottie in Swift. You will learn how to install the library, master all key methods, explore a real example, and avoid common mistakes.

\n\n

Installing Lottie

\n\n

Lottie for Swift is installed via Swift Package Manager (SPM) or CocoaPods. The recommended method is SPM, as it is built into Xcode.

\n\n

Installation via Swift Package Manager (SPM)

\n

\n
1. In Xcode, open your project and select File → Add Packages...
\n
2. Paste the repository URL: https://github.com/airbnb/lottie-ios.git
\n
3. Select the version (latest stable is recommended) and click Add Package.
\n
4. Ensure the package is added to your target.
\n

\n\n

Installation via CocoaPods

\n

If you use CocoaPods, add to your Podfile:

\n

pod 'lottie-ios'

\n

Then run:

\n

pod install

\n\n

Installation via Carthage (legacy method)

\n

github "airbnb/lottie-ios"

\n

Run carthage update --platform iOS and add the framework to your project.

\n\n

Important: After installation, import the library in the required file:

\n

import Lottie

\n\n

Quick Start with Code Example

\n\n

Let's create a simple app that plays a Lottie animation full screen.

\n\n

Step 1: Prepare the JSON file

\n

Download or create a Lottie animation. For testing, you can use free animations from LottieFiles. Place the JSON file (e.g., animation.json) in the Assets folder of your Xcode project.

\n\n

Step 2: Write the code

\n

import UIKit\nimport Lottie\n\nclass ViewController: UIViewController {\n    \n    private var animationView: LottieAnimationView?\n    \n    override func viewDidLoad() {\n        super.viewDidLoad()\n        \n        // 1. Initialize animation from Assets\n        animationView = LottieAnimationView(name: "animation")\n        \n        // 2. Set size and position\n        animationView?.frame = view.bounds\n        animationView?.contentMode = .scaleAspectFit\n        \n        // 3. Add to the screen\n        view.addSubview(animationView!)\n        \n        // 4. Play the animation\n        animationView?.play { (finished) in\n            print("Animation finished: \\(finished)")\n        }\n    }\n}

\n\n

Run the app — you will see the animation play once. To make it loop infinitely, change the play call to play(fromProgress: 0, toProgress: 1, loopMode: .loop).

\n\n

Key Lottie Methods and Functions

\n\n

Below are 10 key Lottie methods