Cycling through iOS animations with Lottie

They say a picture is worth 1,000 words so here are 13,000

Lottie is a magical library for Android, iOS, Web, and Windows which Airbnb devs have put together that allows us engineers to inculcate beautiful, fluid animations created and curated by designers without having to painstakingly recreate them.

Created using Canva

Lottie library parses animations created using Adobe After Effects exported as json with Bodymovin. We can then import these animations into our project and using the lottie iOS library, render them natively on mobile!

Now that we know what Lottie is and how we should work with it, let’s get cracking!

1. Create a single-view iOS application in Xcode

2. Install Lottie in your project:

Add Lottie dependency to the podfile:
pod 'lottie-ios'
Then, run
pod install

Now open the xcworkspace and build the project to check if the pod installation was successful.

3. Go to the Main.storyboard and in your main view in the ViewController, add a container view.

This view will house our lottie animation.

But, wait, where will we get the animation from?

We need a JSON file of animation which has been created in Adobe AfterEffects.

That can be done in two ways:

• A designer can create the desired animation in Adobe After Effects (AE) which is an amazing software that helps you to build incredible animations. In order to use AE animations in Lottie, you should install BodyMovin plugin for AE, which converts your beautiful animations into JSON format.
• You can also find ready-to-use animations on LottieFiles. For this tutorial, I am going to use a this animation that I found there which I download in JSON format and added to my project.

4. Next, go to the identity inspector assign AnimationView as the custom class of your container view.

5. Create an outlet for the container view in the ViewController.swift file.

I have made the animation view private, since it will only be used in this view controller.

The outlet is hooked, but do you see the error message:

Use of undeclared type ‘AnimationView’

This appeared because we haven’t imported Lottie in our view controller yet. Add the following line to the ViewController.swift and build the project. The error goes away now.

import Lottie

6. Now that we have everything hooked up, let’s create a method to play the animation and call it in our viewDidLoad method.

import UIKit
import Lottie
class ViewController: UIViewController {
   @IBOutlet private weak var animationView: AnimationView!
   override func viewDidLoad() {
    super.viewDidLoad()
    playAnimation()
  }
 func playAnimation() {
  let lotView = AnimationView(name: "smoothymon")
  lotView.frame = self.animationView.frame
  self.animationView.addSubview(lotView)
  lotView.animationSpeed = 1
  lotView.loopMode = .loop
  lotView.play()
 }
}

Here, in the playAnimation method, we have created an animation view with the name of our JSON file. Then, we have added it into the container view in our storyboard.

The animation speed property can be used to make the animation as fast or as slow as we want.

So, that the animation plays again and again, we have set the loopMode to loop and finally played the animation using the play method.

7. Build and run the app!

Tada! We have our lottie animation is playing in a loop.

Please refer to CyclingThroughLottie project in my GitHub repo to view the complete project.

To learn more about Lottie, check out Lottie’s documentation.

Also, to read about how the Airbnb dev team rewrote the popular open source library Lottie in swift, check out this blog.