How to Use Lottie Animations in SwiftUI

Animations are ubiquitous nowadays as it becomes more and more trivial for our devices to handle them. When animations are used appropriately, they not only make the UI more interesting but also convey necessary information to the user better. In this article, I will talk about how we can add animations in SwiftUI by using Lottie.

Lottie is an open-source animation file format created by Airbnb. It has following advantages over the traditional animation file format, such as gif and flash.

• it is 600% smaller, so it is much faster to load Lottie animations
• it is resolution independent and can scale to fix any screen size

Without further ado, let’s start using Lottie animations in SwiftUI.

Step 1

Let’s add lottie-ios to our project using Swift Package Manager

1. using Xcode 12 and go to File > Swift Packages > Add package dependency
2. paste the lottie-ios github project URL: https://github.com/airbnb/lottie-ios
3. click on next and select the project target
4. select a rule in which you use the code and click next

Step 2

After adding lottie-ios to our project, we can now add a Lottie file to our project…