A Lottie to Like
Anyone who follows my work knows that I’m a huge fan of using animation and motion design to make digital products more understandable, intuitive and fun. So when AirbnbEng released Lottie I was very excited to take a look at what it could do.
Lottie promises to make it easy to author and implement vector animations on many platforms, including Android. I’m already a huge fan of Android’s native vector animation format AnimatedVectorDrawable so was interested to see how Lottie stacked up. I recently contributed to the Android Google I/O app which featured some interesting motion design; giving me a chance to try out Lottie in anger! I came away thinking that it’s a powerful tool but not a silver bullet. Here’s what I did and didn’t like.
Pros
Workflow
The workflow for Lottie animations is phenomenal. It lets motion designers work in the mega-powerful AfterEffects and export their compositions to an intermediary json format using the bodymovin plugin. Developers then simply drop that into their app’s assets folder and reference it from a LottieAnimationView. It’s super smooth.
Our designers were already producing motion designs in AfterEffects and were happy to export and send us bodymovin json. Dropping this into the app felt almost like cheating; I’d never implemented a complex animation in so little time.
While the tooling around AnimatedVectorDrawable is improving, it is still fairly primitive. The idea of re-creating this composition by hand is terrifying.
Cross platform
Another team was building an iOS app for the conference; they were able to use the exact same json files in their implementation. 👍
Feature & API support
Lottie seems to have broad feature support all of which work back to API 14. AnimatedVectorDrawable supports less features; most of which are also available back to API 14 via the Support Library. I haven’t done a feature by feature comparison but the differences that stand out to me are Lottie’s ability to control alpha on a group (only available on the root element of an AVD or on individual path strokes/fills), multiple fills/strokes per shape, dash patterns and support for gradients (API 24+ on AVD).
Progress control
While this isn’t something we used in the I/O app, I like that you can manually control the progress through an animation (AVD is just start/stop). You can use this to tie an animation to other events like gestures; check out the App Intro demo which ties a background animation to ViewPager swipes. Pretty cool.
On demand animations
Another feature that we didn’t use but Lottie allows is dynamically supplying animations e.g. download them on demand. You wouldn’t embed every image that your app might display but currently most animations are bundled this way. As motion design becomes an increasingly important part of creating a polished user interface I can see this becoming more of an asset.
Cons
Performance
We initially used Lottie for our large animated headers which were a major branding element in the app:
We had to remove these however as they impacted our performance, causing dropped frames when scrolling the UI. I don’t want to completely point the finger at Lottie, we might have been using it incorrectly etc. but this leads me to my next point…
Black boxes
To most Android developers AfterEffects is a black box; certainly it’s very powerful but it’s in no way easy to use. Similarly, bodymovin json files are very compact but not human readable. The Lottie player is probably the most accessible, the code is open source and easily understandable. But if you don’t understand its input then there’s little hope to tune it. This combination means that we found it very hard to diagnose and resolve our performance issue. Perhaps this is a consequence of the ‘magic’ the tool offers in bridging AfterEffects and Android; when it doesn’t work you might find yourself stuck.
Contrast this to AnimatedVectorDrawables which are extremely readable and easy to follow. They take advantage of the RenderThread and native code which give them a distinct performance advantage. In the end we switched our header animations to use AnimatedVectorDrawables (how is a story for another time) which resolved our performance issues. We may have been able to fix our issues with Lottie but given our time constraints and skill sets, we had to move on.
Conclusions
I don’t want the cons we encountered to detract from my overall impression of Lottie; it’s a fantastic tool. Just like any other tool, you should judge when to reach for it and when to use something else. If you’re looking at a simple icon animation, then perhaps AVD is the right choice. If you’re adding a hero animation that would benefit from a motion designer crafting every detail, then Lottie will likely serve you better.
The workflow in particular is fantastic. Having access to a rich, powerful, well understood motion design tool is a big plus. It makes me wish for an AfterEffects → AnimatedVectorDrawable exporter that would bring the best of both worlds. 🤔
Thanks to AirbnbEng for sharing this great tool. If you’re interested in Lottie then I’d highly recommend listening to this podcast with Gabriel Peal who discusses how Lottie came about and how they built the Android player.
Update (4th August 2017): Bodymovin now supports directly exporting AnimatedVectorDrawables 🙌 See:
