How to add Lottie animations to SwiftUI

Using Lottie animations is an easy and popular way to add animations to your app to have that modern look and feel. All sorts of companies use Lottie animations, from startups all the way to the big boys, such as Google, Microsoft, Spotify, and Netflix to name the few.

Using LottieFiles you have a choice to make your own animations using Lottie Editor, buying animations from creators on Lottie Marketplace or using Free Animations to get LottieFile(s) completely free of charge to add them into you project.

UIKit and SwiftUI interoperability

Unfortunately, Lottie animations cannot be added directly to SwiftUI view without some work prior to that. In order to add Lottie animation to SwiftUI, you need to implement UIViewRepresentable protocol which is a wrapper for a UIKit view that you use to integrate Lottie view into your SwiftUI view hierarchy.

Show me the code

Let's get straight to the point, just make sure you previously installed lottie-ios library using your preferred package manager, whether it is CocoaPods, Carthage or Swift Package Manager.

Add new file named LottieView and add following contents:

import Lottie
import SwiftUI

struct LottieView: UIViewRepresentable {

    let fileName: String

    private let animationView = AnimationView()

    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView(frame: .zero)

        animationView.animation = Animation.named(fileName)
        animationView.contentMode = .scaleAspectFill
        animationView.loopMode = .loop

        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)

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

        return view
    }

    func updateUIView(_ uiView: UIViewType, context: UIViewRepresentableContext<LottieView>) { }
}

All you need to do know is add following code to your SwiftUI view: LottieView(fileName: "your-file-name") and that's it, you have fully functioning Lottie animation inside SwiftUI view.

How do I make it to play or pause

In order to make animation play or pause, a bit more coding is required. It is required to provide Coordinator to your LottieView.

What is Coordinator? Let's see what Apple says:

The system doesn’t automatically communicate changes occurring within your view to other parts of your SwiftUI interface. When you want your view to coordinate with other SwiftUI views, you must provide a Coordinator instance to facilitate those interactions. For example, you use a coordinator to forward target-action and delegate messages from your view to any SwiftUI views.

Let's see updated code:

import Lottie
import SwiftUI

struct LottieView: UIViewRepresentable {

    let fileName: String
    let isEnabled: Bool

    private let animationView = AnimationView()

    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView(frame: .zero)

        animationView.animation = Animation.named(fileName)
        animationView.contentMode = .scaleAspectFill
        animationView.loopMode = .loop

        animationView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animationView)

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

        return view
    }

    func updateUIView(_ uiView: UIViewType, context: UIViewRepresentableContext<LottieView>) {
        if isEnabled {
            context.coordinator.parent.animationView.play()
        } else {
            context.coordinator.parent.animationView.stop()
        }
    }

    class Coordinator: NSObject {
        var parent: LottieView

        init(_ parent: LottieView) {
            self.parent = parent
        }
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
}

And this is it! You can now pass isEnabled Bool value to LottieView to make it play or pause.

One final gotcha

If you are using TabView withing your SwiftUI application and you are switching between tabs you will notice that animations won't start playing automatically when you switch back to view with animations.

All you must do is add animationView.backgroundBehavior = .pauseAndRestore to makeUIView(context:) method. Now animations will pause and restore as the code itself suggests.

Conclusion

Thank you for reading and I hope this article was useful to you! In conclusion, this article went over how to add Lottie animation(s) to SwiftUI view, make it reactive if needed and how to use Lottie animations with TabView.

If you like my content and find it useful, please consider following me here on DEV Community. If you are feeling extra generous, please consider buying me a coffee.

Connect with me on LinkedIn.