Lightweight, scalable Lottie animations for Kaodim products

In the first quarter of 2021, one of the features being build is to ease customer’s anxiety while waiting for a vendor to respond to their job request. We are introducing an estimated response time, and information they need to be aware of to use Kaodim features and products. I’ll write more on this after the feature is released. For now, I will focus on the animations.

Me (not really..) working on animations šŸ™Š

Background

I have been been working on prototypes and generating animations for Kaodim products, but most of the time the animations were provided as a GIF file, or minor ones (like animating an icon’s position and scale) were done by developers. This time around I decided to give Adobe After Effects and Lottie.

Why Lottie?

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Flexible After Effects features

Lottie support solids, shape layers, masks, alpha mattes, trim paths, and multiple patterns. You can go forward, backward, and ā€” most importantly ā€” you can program your animation to respond to any interaction.

Small file sizes

This is probably the best thing about Lottie. Vector animations cab be bundled within an app without having to worry about multiple dimensions, device sizes or large file sizes.

A demonstration on the file size comparison with GIF and JSON

Number of animations

As I said earlier, previously I had provided animations as GIF files. This is relatively easier for developers to implement as they have to present an image. But for this feature update there were upto 6 animations I had to prepare. Since the animations were complex, the GIFs prepared were at leas ~5MB each. That’s already a red flag not to consider GIF.

LottieFiles

Having never learned Adobe After Effects, I turned myself into online lessons and tutorials to learn how to do this right. LottieFiles seemed like the best way to do this, and their courses really helped.

Get things moving

It was exciting to get started on animations. Its also mindblowing to see how tiny a JSON exported from LottieFiles is. For a 6MB GIF (animation being choppy and pixellated), the LottieFiles JSON was just 20kb (scalable vector animation). Thanks to the developers who were open to implement Lottie library to their code. To quote from my colleague, an Android developer ā€” “it did help us save a lot of filesize”

Do have a look at my profile on LottieFiles. More animations on the way šŸš€

https://lottiefiles.com/prasil