# How to Add Lottie Animations in iOS Apps (Swift)

*By Sam Osborne · January 30, 2026*

A Swift/iOS tutorial on how to add Lottie animations to your apps.

---

**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](https://developers.lottiefiles.com/docs/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):**

1.  Open your project in Xcode and go to **File -> Add Packages..**
2.  Paste the repository URL: https://github.com/LottieFiles/dotlottie-ios.git
3.  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

```swift
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

```swift
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
```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
```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

```javascript
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

```swift
- `.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

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

```

###   
Lottie-ios style

```javascript
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

---

## Related Articles

- [How to Create Animations with AI Using Lottie Creator WebMCP](/blog/working-with-lottie-animations/how-to-create-animations-with-ai-using-lottie-creator-webmcp)
- [How to Build Your First Lottie Creator Plugin: Create and Animate a Rectangle](/blog/working-with-lottie-animations/how-to-build-lottie-creator-plugin-create-and-animate-a-rectangle)
- [How to Develop and Publish a Plugin for Lottie Creator](/blog/working-with-lottie-animations/how-to-develop-and-publish-a-plugin-for-lottie-creator)
- [How to Publish a Lottie Creator Plugin to Extensions](/blog/working-with-lottie-animations/how-to-publish-a-lottie-creator-plugin-to-extensions)