Getting Started with the iOS Player

In this tutorial, you will install the iOS player and display your first Lottie animation in a SwiftUI or UIKit application.

Supported Devices

Currently this package supports a minimum iOS version of 15.4+ for iPhone and iPad. macOS is supported for versions 12.0 and upwards.

Installation

Via the Swift Package Manager:

In the package finder in Xcode, search for LottieFiles/dotlottie-ios or use the full Github path: https://github.com/LottieFiles/dotlottie-ios

Then import the framework:

import DotLottie

SwiftUI — DotLottiePlayerView (Recommended)

DotLottiePlayerView is the recommended SwiftUI view. It uses a declarative modifier API.

Load from the asset bundle

struct AnimationView: View {
    var body: some View {
        DotLottiePlayerView(animation: DotLottieAnimation(
            fileName: "cool_animation",
            config: AnimationConfig(autoplay: true, loop: true)
        ))
        .looping()
        .playing()
        .frame(width: 300, height: 300)
    }
}

Load from a URL

struct AnimationView: View {
    var body: some View {
        DotLottiePlayerView({
            try await DotLottieAnimation(
                webURL: "https://lottie.host/link.lottie",
                config: AnimationConfig(autoplay: true, loop: true)
            )
        }, placeholder: {
            ProgressView()
        })
        .looping()
        .playing()
        .frame(width: 300, height: 300)
    }
}

SwiftUI — DotLottieAnimation with .view()

You can also use the lower-level DotLottieAnimation view model directly:

struct AnimationView: View {
    var body: some View {
        DotLottieAnimation(
            fileName: "cool_animation",
            config: AnimationConfig(autoplay: true, loop: true)
        ).view()
    }
}

Load from a URL

struct AnimationView: View {
    var body: some View {
        DotLottieAnimation(
            webURL: "https://lottie.host/link.lottie",
            config: AnimationConfig(autoplay: true, loop: true)
        ).view()
    }
}

Load from a JSON string

struct AnimationView: View {
    var body: some View {
        DotLottieAnimation(
            animationData: "{\"v\":\"4.8.0\",\"meta\":{\"g\":\"LottieFiles AE...\"}}",
            config: AnimationConfig(autoplay: true, loop: true)
        ).view()
    }
}

UIKit — DotLottiePlayerUIView (Recommended)

DotLottiePlayerUIView is the recommended UIKit view with convenience initializers and a property-based API.

class AnimationViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let playerView = DotLottiePlayerUIView(
            name: "cool_animation",
            config: AnimationConfig(autoplay: true, loop: true)
        )
        playerView.frame = CGRect(x: 50, y: 100, width: 300, height: 300)
        view.addSubview(playerView)
    }
}

Load from a URL

let playerView = DotLottiePlayerUIView(
    url: URL(string: "https://lottie.host/link.lottie")!,
    config: AnimationConfig(autoplay: true, loop: true)
)

UIKit — DotLottieAnimation with view()

You can also use the lower-level DotLottieAnimation approach:

class AnimationViewController: UIViewController {
    var simpleVM = DotLottieAnimation(
        webURL: "https://lottie.host/link.lottie",
        config: AnimationConfig(autoplay: true, loop: false)
    )

    override func viewWillAppear(_ animated: Bool) {
        let dotLottieView = simpleVM.view()
        view.addSubview(dotLottieView)
    }
}