Integrate an Animation using Lottie on iOS

In this blitz of a doc, we're going to show you how to integrate a Lottie animation, exported from Flow, into an iOS project.

Flow Logo Animation

Set up a Project (if you need to)

If you don’t have an iOS project you’re already working on, then create one now. If you’ve already got a project, skip to the next section.

This step starts at 0:32

1. Create a new Xcode Project
2. Choose iOS - Single View App
3. Name it FlowLottie
4. Save it to the Desktop
5. Run it (just to get things warmed up)

Install Lottie

Flow exports some buttery Lottie animations. So, let’s install their cocoapod.

This step starts at 0:57

1. Open the Cocoapods app
2. Create a New Podfile from Xcode Project
3. Add pod 'lottie-ios', '~> 3.1'
4. Hit install
5. Open the newly created workspace

Export From Flow

Now, let’s output some Lottie…

This step starts at 1:44

1. Download the file above (if you haven’t already)
2. Export the FlowLogoAnimation timeline using the Lottie option
3. Open the exported folder

At this point you could have a look at your animation, running via Lottie, by opening the index.html file you just exported

Import Your Animaton

Let’s get our animation into our project.

This step starts at 2:22

1. Drag flowlogoanimation.min.json into your Xcode project

Add Your View

Next, you need to add a view to your app. We’re using storyboards. If you’re using SwiftUI, or another approach, just adapt the next few steps to your needs.

This step starts at 02:39

1. Add a new View to your storyboard.
2. Resize it to 345 x 240
3. Add constraints
4. Change its type to AnimationView
5. Change the module to Lottie

Connect Your View

Now, let’s connect everything up.

This step starts at 3:43

1. Drag an outlet from your storyboard into your main ViewController
2. Name the variable animationView
3. In viewDidLoad instantiate the animation like this:

   let animation = Animation.named("flowlogoanimation.min")
   animationView.animation = animation
   

4. In viewDidAppear trigger the animation like this:

   animationView.play()
   

5. Hit play.

So easy.

Repeat the Animation

To make an animation repeat, add a variable to the constructor.

This step starts at 5:14

1. Add a loopMode to the animation view so that it looks like this:

   animationView.loopMode = .repeat(.greatestFiniteMagnitude)
   

2. Hit play

Sooooo easy.