CASE STUDY: LOTTIE - Applover Estimate

CASE STUDY: LOTTIE

Lottie or: How to delegate work from devs to designers

Lotte Reiniger was a pioneer of silhouette animation in film. Her namesake which also happens to be the matter of this post is also a huge breakthrough in animation. Lottie by Airbnb is an open-source Android, iOS and React Native library that focuses on making it easier to add beautiful animations to your applications. Note that I will focus on Android as this is what I do, however most of my thoughts during tests were similar to my iOS counterpart.

 

 

The usual approaches to animation in Android apps were really cumbersome and/or difficult for developers. You could use AnimationDrawables, an ancient, painfully slow and memory-hogging solution. Better than that you could try to utilise GIFs, however they too can take up a significant chunk of memory. On top of that, both these solutions are not scalable in the slightest. You would have to deliver assets in up to 5 different sizes which would increase the .apk size by a lot.

All this hassle can be taken care of if you have your developers do it by hand. Anything more complex than the simplest of animations done with ObjectAnimators and View.animate() method are really time consuming though. In the kind of animations that really improve the visual feel of the application you would have to use Animated Vector Drawables. They are not that hard to use, as they are basically just transitions between different SVG files, however there are some issues associated with this approach. First of all, it only supports Android API21 and higher (only about 70% of market) because of path morphing. It also requires the developer to run the svg files through some kind of SVGO to reduce the sizes of SVG files. This may cause going back and forth between the developer and graphic designer because of slight discrepancies in animation caused by optimization.

 

Our story with Lottie

 

We first heard about Lottie sometime in mid-march when it was already a stable, proven release. At Applover we really crave to stay in touch with all the newest trends and tools and make use of them as soon as it is viable. We quickly delegated a team to investigate the library, doing some research and tests into performance and memory issues. We quickly came to conclusion that the best course of action is to swiftly employ Lottie in all of our project. Animation is a really important aspect of well designed application and we realized it would be wise to fully leverage its power.

Note that all numeric values found below are based on rudimentary tests and are very project specific.

We devised a simple test to compare Lottie with more regular approaches both on iOS and Android. There was to be a scrolling screen (pictured above) that would snap to certain elements and, depending on scroll’s value, would morph the shape of said elements. Coding this by hand turned out to be a real pain in the back side but with Lottie it was much easier. The time it took me to do the Android side was cut by about 75%. Moreover, the fact that the designer did most of the work, that would otherwise be done on both iOS and Android platforms (more on that later), allowed us to cut the time we spent on the project as a team almost in half. On top of that the Lottie approach saved us about 20-30% of CPU usage during the rendering.

 

What is Lottie, exactly

 

The basic premise of Lottie is that developers shouldn’t code animations by hand inside of the application. It is much better to create the animation once in After Effects, export it using Bodymovin and simply plug the output JSON file into web, iOS and Android applications. Then, the library takes care of parsing the JSON data and rendering the graphics. Apart from its re-usability (you don’t have to build the same animation twice or three times from scratch) it has many other benefits that come to mind as soon as you start to use it:

– The animations in JSON take up about 30-50% less RAM memory than corresponding GIFs, which mitigates the risk of OutOfMemory exceptions and provides smoother in-app experience
– The size saving is even more apparent when you take into account that for every animation in your application you would have to provide about 5 or 6 gifs of different sizes which quickly adds up to quite a sizable .apk file.
– The CPU use seems to be lower in almost all situations compared to ObjectAnimators.
– You don’t have to rely on the timing provided in the animation. The progress of the animation can be dependent on views’ scroll, gesture or anything else. Lottie’s API is really easy to use and well-suited to a wide range of needs.
– The graphic designer does the animation itself, specifies all the movement and transformations. The developers’ job is to just hook it up to the application, give it progress updates and they’re set. Depending on your company model that might be an amazing thing.

In conclusion, Lottie’s greatness comes from combining the best of two words. It has the hand-craftiness, smoothness and beauty of designer-made GIFs, while at the same time it provides scalability and ease of control of manually coded animations.

 

Where it’s headed

 

The guys at Airbnb are still actively developing the library and don’t seem to be slowing down. They say they want to increase the number of supported AfterEffects features to give designers even greater control over the look of the animations. We are really looking forward to those improvements as we plan on using this great library a lot in the near future.

// CHECK MORE

READ MORE AMAZING ARTICLES FROM OUR TEAM.

Applover Hackathon

Read more

Kotlin DSL for Android DateTime API

ThreeTenDsl for Android Kotlin

Read more

UX / UI Trendbook for 2019 – Free download

Read more

OUTSOURCING IT

Read more

WHAT ARE ANDROID INSTANT APPS

Read more

WRAPPING UP 2018

Looking back at year 2018 for Applover

Read more

CYBERSECURITY

How to make sure your website is secure?

Read more

HACKATHON BLOCKCHAIN CHALLENGE

Building Blockchain Loyalty System at the HackYeah Hackathon 2018

Read more

BLOCKCHAIN IN SERVICE OF RAINFOREST

A story about a Software House with a goal oriented approach

Read more

WHAT ARE SMART CONTRACTS?

A beginners guide to the future of Financial System.

Read more

CASE STUDY DOMORE

The crowdfunding portal DoMore was launched in 2009 as a service whose main goal was to combine donors and beneficiaries in one place.

Read more

CASE STUDY AMINO

Amino Fitness App is a mobile application and training platform in Dubai, aimed at matching personal trainers from various sports disciplines with potential clients.

Read more

CASE STUDY FOOTSTEPS

Footsteps Smart Cities is one of the B2G market leaders in Poland. The company offers smart city mobile solutions and cooperates with several dozen local governments in Poland.

Read more

USE CASE: FOOTSTEPS

Building business on mobile app brings us a few questions, among others, how can we make money on our application.

Read more
A person writing on a whiteboard

5 TOOLS FOR PMs

We have all been there. Working for a year for a software company with a “junior developer” sticker on your shoulder. You’d love the promotion?

Read more

KOTLIN

Kotlin is a small island near Saint Petersburg, Russia. As it happens there is a Jetbrains office not that far from it.

Read more

WHAT’S IMPORTANT FOR RECRUITMENT

Since January 2016 our team has grown up significantly – from 4 members to a team of more than 20 developers, project managers, designers and testers – this required a lot of recruiting, but we’ve had not much knowledge about recruitment and employer – employee relation at that time.

Read more

CASE STUDY: LOTTIE

Lotte Reiniger was a pioneer of silhouette animation in film. Her namesake which also happens to be the matter of this post is also a huge breakthrough in animation.

Read more

INTERVIEW 1

What is iNeoSyte – what does it do, why did you invent it, which value does it provide?

Read more