How to use Lottie animation in SwiftUI

Posted on 13 Dec 2023 . 2 min read

Lottie is a fantastic tool for incorporating high-quality animations into your SwiftUI projects. There are several ways to add Lottie to project. But in this tutorial we will use Swift Package Manager(SPM). To use Lottie animations in SwiftUI, you can follow these steps:

In this article:

Step 1: Install Lottie Package
Step 2: Import Lottie
Step 3: Use LottieView in SwiftUI
Step 4: Use the LottieAnimationView
Step 5: Customize Animation

Step 1: Install Lottie Package

First, you’ll need to add the Lottie package to your project. You can do this using Swift Package Manager. In Xcode, go to File -> Swift Packages -> Add Package Dependency, then enter the Lottie GitHub repository URL: https://github.com/airbnb/lottie-ios.git

Step 2: Import Lottie

Once you’ve added the Lottie package, import it into your SwiftUI file where you want to use the animation:

import Lottie

Step 3: Use LottieView in SwiftUI

Create a SwiftUI view that incorporates the Lottie animation. For example:

struct LottieAnimationView: UIViewRepresentable {
    var filename: String
    var loopMode: LottieLoopMode = .loop

    func makeUIView(context: Context) -> some UIView {
        let view = UIView()
        let animationView = AnimationView()
        animationView.animation = Animation.named(filename)
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = loopMode
        animationView.play()

        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)

        NSLayoutConstraint.activate([
            animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
            animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
            animationView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            animationView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])

        return view
    }

    func updateUIView(_ uiView: UIViewType, context: Context) {}
}

Step 4: Use the LottieAnimationView

Now, you can use the LottieAnimationView within your SwiftUI code:

struct ContentView: View {
    var body: some View {
        VStack {
            LottieAnimationView(filename: "animation-file-name")
                .frame(width: 300, height: 300)
        }
    }
}

Replace "animation-file-name" with the actual name of the Lottie animation file you have in your project.

Step 5: Customize Animation

You can further customize the LottieAnimationView by adding parameters or methods to control the animation's behavior, like adjusting its size, playback speed, or defining different animations based on conditions.

The bottom line

Ensure the Lottie animation file is added to your Xcode project and is included in the target membership to make it accessible in your code.

This should get you started with integrating Lottie animations into your SwiftUI project. Feel free to tweak and customize the implementation to suit your specific animation needs!

Don’t hesitate to contact me if you have any questions or queries. Follow me on twitter @gurjitpt for any updates.

Thanks!

Share this article

Written By

Generic placeholder image

Gurjit Singh

I’m Computer Science graduate and CompTIA Security+ certified SOC Analyst and Mobile Application Security Engineer with 10+ years of cross-platform development experience across iOS, Android, and web.

Discover articles by topics

SwiftUI Class Struct Networking XCode NSCache Enum Optionals Property Observers Closures Guard Reviews StoreKit App Store Algorithms Testing Operators Protocol Extensions Weak Unowned SwiftData WWDC23 GCD API Admob SwiftLint Lottie Foreach Objective-C UIKit NavigationSplitView