Using Lottie Animations in watchOS

Lottie animations have changed your life, adding magic to dazzle your users suddenly became effortless for developers. And for that, you, your team, your friends, your partner, kids and maybe even your dog are all using cool animations everywhere! It’s beautiful!

Lottie supports Web, Android, iOS, Desktop and even Multi-Platform. So basically everything, right? 😁

If you have been using Lottie Library by Airbnb, life has been treating you good, well, until you reach the point you need to add some of this magic to your Apple Watch apps and you realise it’s not supported. And this is how you react:

This article is here to give you peace of mind, and show you how to support Lottie animations in your watchOS apps. 😁

Getting started

Ok, so to begin, we need to understand that Lottie library by Airbnb doesn’t support watchOS and the reason is that it requires CoreGraphics in order to render the animations and the framework is not part of the watchOS bundle.

But don’t worry, we have alternatives and that’s what we are covering here today. To get started, create a new Xcode project for watchOS (it doesn’t really how you decide to do it, if it’s a Standalone app or an extension of your iOS app).

Once the project is created, close it and in terminal navigate to the root folder of the project. Then initiate cocoapods for the project with the following:

Then open the Podfile using your editor of choice. Here we will add the required pods to our watchOS extension target.

Then back to terminal, install the pods with:

Once it’s done installing the dependencies, open your project using the xcworkspace file.

At this stage, you should try to build the project using CMD+B to make sure everything is in order.

You may encounter an issue compiling the pods such as in the image below.

If you do, simply navigate to rlottie_capi.h file and replace the following line.

Try to build again and everything should be fine. 😊

Implementing on watchOS with Storyboards

At this stage, you have everything set and it’s time for some fun!

Start by opening the storyboard and adding an InterfaceImage and connect it to your InterfaceController class.

Then, navigate to InterfaceController.swift and start by importing SDWebImageLottieCoder.

Now, we are going to start adding our animation configuration. First step is to add the variables to support our implementation. Add this right after closure of awake func.

Having that set, let’s load the animation data.

Then we configure the animation with the loaded data:

After this, we set the current frame into the WKInterfaceImage:

And here’s how we can play/pause our animations:

Then we setup the looping and next frame configuration:

And finally, we request our animation from awake function:

If you followed all the instructions above (and well, if you also didn’t decide to rebel on your own implementation half way 🤓) this is what you should see:

Awesome, right? Now, your watchOS apps are ready for magic, so let’s get creative! 🤩 You can find the full code here. And if you want to know more about Lottie, check here.

PS.

This implementation is using rlottie framework (by Samsung) instead of Lottie (by Airbnb), which means that instead of rendering vectors, we are rendering the animations into rasterized bitmaps, frame by frame. This means that some animations might not load the same as they do using vectors.

Geek Culture

Proud to geek out.

Sign up for Geek Culture Hits

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store