How to add Lottie animations in your Xcode Project (Swift) ?

If you’re here reading this, it means you already have enough knowledge about iOS development and want to add that extra bit of magic to your apps.

What we’ll cover in this article?

By the end of this article, you will understand and be able to build your own iOS app with custom Lottie animations.

Lottie Animations

What is Lottie?

A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets.

How do I start?

You’re looking for animations in your app. So, I’m assuming you know the basics and already familiar with cocoa pods installation.

Let’s get started :

• Open Xcode, select “Create new Xcode project”
• Select iOS, then “App”

• Add the name of the project, organization and identifier. Select Swift and Storyboard. Tap Next and Create.

To start, close the project, open terminal and navigate to your project’s root folder. Type and run the following:

pod init

pod installation

• Add the pod ‘lottie-ios’ in your pod file with the following code:

# Uncomment the next line to define a global platform for your project
# platform :ios, '14.0'
target 'LottieAnimations' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
# Pods for LottieAnimations
    pod 'lottie-ios'
end

• Save, and open the terminal in your Mac and navigate to the project root folder, then type and run:

pod install

As soon as it’s finished, double tap to open the xcworkspace file:

• Now navigate to ViewController.swift, add following line to the top of the file.

import Lottie

Make sure if everything is okay by pressing cmd+B

• Great, the fun part about Lottie is you can choose from 1000s of free animations on LottieFiles.
• Once downloaded the JSON animation file, drag and drop to the project, make sure our project is selected as target and copy items if needed is selected.

Adding a Lottie animation view using UIKit

In your storyboard or Xib file, drag and drop a UIView to your ViewController, then on the right corner, navigate to Identity Inspector, change class to AnimationView and set module to Lottie.

Add Animation View

Then in top right corner, navigate to Attribute Inspector and add name of the animation file (excluding .json extension).

Add Lottie file name

Now link the view to your view controller

Once linked, close the right side Editor and navigate to ViewController.swift. Replace the function viewDidLoad with the following:

override func viewDidLoad() {

  super.viewDidLoad()
  
  // 1. Set animation content mode
  
  animationVieww.contentMode = .scaleAspectFit
  
  // 2. Set animation loop mode
  
  animationVieww.loopMode = .loop
  
  // 3. Adjust animation speed
  
  animationVieww.animationSpeed = 0.5
  
  // 4. Play animation
  animationVieww.play()
}

And test it out by pressing CMD+R. And see the magic happening 🪄 💫