What it is
Lottie renders Adobe After Effects animations exported as JSON, natively and at runtime, on iOS and macOS.
Load a JSON animation into a LottieAnimationView or the SwiftUI LottieView, and control playback, looping, speed and progress.
Installation
.package(url: "https://github.com/airbnb/lottie-ios.git", from: "4.5.0")Getting started
The smallest useful thing you can do with it, and what each part means.
swift
// SwiftUI
LottieView(animation: .named("loading"))
.playing(loopMode: .loop)
.animationSpeed(1.5)
.frame(width: 120, height: 120)
// UIKit
let animationView = LottieAnimationView(name: "success")
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .playOnce
// Cache in memory so repeated plays do not re-parse the JSON.
animationView.animationSpeed = 1.0
animationView.play { finished in
if finished { self.dismiss() }
}Advanced usage
Where the library earns its place over a simpler alternative.
swift
// Recolour a layer to match the app's theme without a new export.
let colorProvider = ColorValueProvider(UIColor.systemBlue.lottieColorValue)
animationView.setValueProvider(
colorProvider,
keypath: AnimationKeypath(keypath: "Shape Layer 1.**.Color")
)
// Drive the animation from a gesture or scroll position.
animationView.currentProgress = CGFloat(scrollOffset / maxOffset)
// Play a named segment rather than the whole timeline.
animationView.play(fromMarker: "start", toMarker: "loaded", loopMode: .playOnce)
// Respect the accessibility setting.
if UIAccessibility.isReduceMotionEnabled {
animationView.currentProgress = 1 // show the end state, do not animate
}Errors and fixes
The failures you are most likely to hit, and what actually resolves them.
- The animation does not appear
- The JSON is not in the bundle, or the name is wrong. Confirm it is in Copy Bundle Resources and matches exactly.
- Frame rate drops during playback
- The animation has too many layers or effects. Ask for a simplified export, or reduce the render size.
Best practices
- Respect UIAccessibility.isReduceMotionEnabled and skip to the final frame instead of animating.
- Keep animations small — complex After Effects files can be expensive to render each frame.
- Use markers to play segments rather than exporting several files.
- Test on older devices; heavy vector animation can drop frames.
Background
Why it exists, and what it was reacting to.
From Airbnb, Lottie removed the need for developers to reimplement designers' animations by hand. The designer exports a JSON file and the app plays it as real vector animation, not a video.