Add Lottie animations in your iOS project

Snehagrawal
2 min readNov 27, 2022

--

Animations ought to improve the app user experience. They add interest and dynamic to your app. In contemporary mobile applications, perceived performance is greatly influenced by fluid animations and seamless transitions.The process of optimising iOS animation without the proper tools might be difficult task in itself.

Lottie imports and renders bodymovin JSON-exported animations and vectors. The options are unlimited and Lottie can play or loop just a piece of the animation. Even at runtime, there are many different ways to modify animations.

Below are the steps on how you can add Lottie animations in your iOS applications.

Step 1: Go to File > Swift Packages > Add package dependency.

Step 2: Import the lottie-ios github project URL: https://github.com/airbnb/lottie-ios

Step 3: Select a suitable animation from the link: https://lottiefiles.com/

Step 4: Download the .json file of the preferred animation. Now import into your xcode project. eg. loading_animation.json

Step 5: Make a UIViewRepresentable instance to create and manage a UIView object in your SwiftUI interface.

Step 6: Now use this Lottie struct directly in the View and mention the name of the Lottie file in the place of name with inverted commas.:

Step 7(optional): Inside a button you can create an action of this animation. eg. You can display the animation by adding a timeline of 4 seconds like this:

And you are done…!!

Lottie animations are free and easy to use. You can add as many animations as you want and make your application stand out of the crowd..

Feel free to share your ideas on the same.. :)

Like, share and follow to get more interesting content…!!

--

--

Snehagrawal

An assiduous and ingenious Product Manager who has 3+ years of experience building and managing products from scratch to release.