It’s that time of the year when magic is in the air. Christmas time is coming and why not give some magical touch to your apps 🧙🏻‍♂️.

I’m going to show you here how to make it snow in your app using Lottie animations :).

Well, I’m the apps guy. I joined LottieFiles as the Head of Mobile where I’m responsible for delivering the best experience, yet bringing value to our users in all the native apps platforms, including desktop and mobile.

I wear many hats, as I’m a developer for Apple platforms, managing Android, writing articles and recording video tutorials, giving support to Mobile related issues, coordinating with other teams such as Design, API and marketing, planning and releasing new apps, features and fixes, and mainly being the funny guy that wears colorful shirts in the team meetings :).

How did you choose the mobile development career?

My father has always been…

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. …

Perhaps, you might be wondering: Why would you? What are the advantages? How to do it?

If you have these questions, you came to the right place! I'm here to tell you a bit about the why, the what and the how. 😀 But only when you are ready! So go grab your coffee and come back so we can start already! 👨🏻‍💻

SVG? Lottie?

Not sure what they are? Well, SVG files are Scalable Vector Graphics based on XML markup and with them, you can basically represent anything you can draw in tools like Ilustrator, with the big advantage of scaling…

Your experience with AVPlayer has been, from the beginning, a love/hate thing, hasn’t it? There are things that are so straightforward, but some that, well, better we change the subject, right? 😂

Maybe you’ve reached a point in your experience with AVPlayer that demanded you to fade in/out the volume of your player. Maybe to smoothly finish your playback, maybe to nicely start or transition playbacks, whatever the reason, you may have reached the point to try for yourself:

And you realise that there isn’t a function available to fade the audio. 🤦🏻‍♂️

Alright, before we panic, here are the options:

1. In case all you need is…

If you are reading this, it means you are ready to add that magic touch to your iOS apps, that sprinkled salt to the top of your masterpiece, that one thing that will make your users cry of joy when they see it, because it’s just, beautiful.

And how to do it, you wonder? Well there are many ways, of course, but the one that we’ll talk about here today is Lottie.

What will we be doing here?

By the end of this article, you will understand and be able to build your own app with custom Lottie animations. And here’s what we are building:

Have you ever had a case, that once your UI is done, implemented, all animations are working, pixel-perfect, beautifully aligned and resized to all screen sizes, exactly as the designs. You are so proud of your work and finally you can brag about it to all your colleges while having that well deserved cup of coffee when your designer comes to you and tells you: "There’s one more thing!".

Evandro Harrison Hoffmann

Adventure seeker, dreamer, foodie and a magician 😉

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