How to Add Lottie Animations in iOS Apps (Swift)

Sam Osborne•Jan 30, 2026•3 min read

Jan 30, 2026•3 min read

How to Add Lottie Animations in iOS Apps (Swift)

Update Note: This guide was originally published on 17 Nov 2022 and has been fully updated on 30 Jan 2026 to use the dotLottie-ios SDK. While the original version focused on standard JSON Lottie, we now recommend the dotLottie player for its superior compression, faster loading times, and support for the .lottie file format.

Animations can transform a good app into a great one. For years, the standard has been using the Lottie JSON format. However, as apps become more complex, performance and file size matter more than ever.

In this updated guide, we’ll show you how to implement animations using the dotLottie player—the most optimized way to bring Lottie animations to iOS.

Why the switch to dotLottie?

The new dotLottie player doesn't just play your old animations; it unlocks the .lottie format. This format is essentially a super-compressed package that can include images and multiple animations in one tiny file (often 80% smaller than a standard JSON).

Step 1: Install the dotLottie-ios SDK

We are swapping out the traditional lottie-ios library for the official LottieFiles dotLottie player.

Using Swift Package Manager (SPM):

Open your project in Xcode and go to File -> Add Packages..
Paste the repository URL: https://github.com/LottieFiles/dotlottie-ios.git
Select the version and click Add Package.

Step 2: Player Usage

dotLottie animations are easy to set up in your app. Two ways of initializing are available: The original API method and a new API mirroring lottie-ios.

Original Setup (SwiftUI & UIKit)

Start by importing DotLottie into your file and creating a DotLottieAnimation object.

SwiftUI - Original API

import DotLottie

class AnimationController: View { 
public var animationInstance: DotLottieAnimation = DotLottieAnimation(fileName: 'animation.lottie', config: AnimationConfig(auto: true, loop: true))
	
var body: some View {
		VStack {
			animationInstance.view()
		}
	}
}

UIKit - Original API

import DotLottie
import UIKit

class AnimationViewController: UIViewController {

    // 1. Configure the animation
    private var dotLottie: DotLottieAnimation = {
        return DotLottieAnimation(
            fileName: "celebration", // Your .lottie or .json file
            config: AnimationConfig(
                autoplay: true, 
                loop: true
            )
        )
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        // 2. Access the view and add it to your hierarchy
        let animationView = dotLottie.view()
        animationView.frame = self.view.bounds
        self.view.addSubview(animationView)
    }
}

Lottie-ios style (SwiftUI & UIKit)

A SwiftUI view similar to `LottieView` from lottie-ios. This uses SwiftUI's declarative syntax with modifier chains:

```swift
// Simple looping animation

let animation = DotLottieAnimation(
    fileName: "Flow 1",
    config: AnimationConfig(
        autoplay: false,
        loop: false,
        speed: 1.0
    )
)

DotLottiePlayerView(animation: animation)
    .looping()
    .animationSpeed(2.0)
    .frame(height: 200)

// With progress control
DotLottiePlayerView(animation: animation)
    .currentProgress(0.5)
    .playbackMode(.paused)
```

A UIKit view similar to `LottieAnimationView` from lottie-ios. This provides a familiar API for UIKit developers:

```swift
// Initialize
let playerView = DotLottiePlayerUIView(
    name: "Flow 1",
    bundle: .main,
    config: AnimationConfig()
) { view, error in
    print("Animation loaded!")
}

// Configure
playerView.loopMode = .loop
playerView.animationSpeed = 2.0

// Control playback
playerView.play()
playerView.pause()
playerView.stop()

// Access properties
let progress = playerView.currentProgress
let frame = playerView.currentFrame
let totalFrames = playerView.totalFrames
```

Step 3: Playback Controls

The dotLottie player allows you to have fine grained control over your animation’s playback state and style.

List of playback control modifiers

Original API

animationInstance.setLoop(loop)
animationInstance.setAutoplay(autoplay)
animationInstance.pause()
animationInstance.play()
animationInstance.stop()
animationInstance.setMode(mode)
animationInstance.setLoop(loop)
animationInstance.setSpeed(speed)
animationInstance.setProgress(progress)
animationInstance.setFrame(frame)
animationInstance.useFrameInterpolation()
animationInstance.setSegments((start, end))

Lottie-ios style API

- `.looping()` - Loop the animation
- `.playing()` - Play once
- `.paused()` - Pause at current frame
- `.playbackMode(_:)` - Set playback mode (playing, paused)
- `.loopMode(_:)` - Set loop mode
- `.animationSpeed(_:)` - Set playback speed
- `.currentProgress(_:)` - Set progress (0.0-1.0)
- `.currentFrame(_:)` - Set specific frame
- `.mode(_:)` - Set playback mode (forward, reverse, bounce)
- `.useFrameInterpolation(_:)` - Enable/disable frame interpolation
- `.segments(_:)` - Play specific segment
- `.configuration(_:)` - Set animation configuration

Playback usage example - Using Segments

If you have a "Success" animation that should only play once a task is finished, you can define segments directly on the player:

Original API

func onTaskCompleted() {
    // Plays from frame 50 to 100
    dotLottie.setSegments(segments: (50, 100))
    dotLottie.play()
}

Lottie-ios style

struct MyAnimationView: View {
    let animation = DotLottieAnimation(
        fileName: "Flow 1",
        config: AnimationConfig(
            autoplay: false,
            loop: false,
            speed: 1.0
        )
    )
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            DotLottiePlayerView(animation: animation)
                .segments((10,10))
	  }
}
}

Start using dotLottie now

By updating your workflow to the dotLottie player, you’re future-proofing your iOS app. You get smaller binaries, faster load times, and a simpler API for controlling your animations.

Learn more about dotLottie