How to use Lottie animation in SwiftUI

SwiftUI Lottie Animation

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

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:

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.translatesAutoresizingMaskIntoConstraints = false

            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.


Share this article

Written By

Generic placeholder image

Gurjit Singh

I’m Computer Science graduate and an iOS Engineer who writes about Swift and iOS development. Follow me for more updates:

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

Related Articles

Deep Dive into Autorelease Pools in Swift

In the realm of software development, memory management plays a crucial role in ensuring the efficient allocation and deallocation of memory...

2024-01-28 . 4 min read     Swift Autorelease

Read More »

Swift enum equatable: with or without associated values

Swift enums provide a powerful way to model a set of related values. Enums can be equipped with associated values, allowing them to represen...

2024-01-24 . 3 min read     Swift Enums

Read More »

How to create Date Picker in SwiftUI

Use a DatePicker when creating a view that enables users to choose both a calendar date and, if needed, a specific time.In SwiftUI, you can ...

2024-01-16 . 2 min read     SwiftUI DatePicker

Read More »

Getting started with Swiftlint to enforce Swift style

SwiftLint is a tool that ensures Swift code adheres to defined style guidelines. It automates code review by identifying and suggesting impr...

2023-12-29 . 4 min read     Swift SwiftLint

Read More »

How to get index in Foreach in SwiftUI

In SwiftUI, the ForEach is used to iterate over a collection of data and create views dynamically based on that data....

2023-12-07 . 3 min read     SwiftUI ForEach

Read More »

How to implement navigation split view in SwiftUI

n SwiftUI, the NavigationView and SplitView allow you to create split-screen layouts, especially useful for iPad applications....

2023-11-30 . 2 min read     NavigationSplitView

Read More »