Project Overview

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.

Organisation

Airbnb Design

Team

Salih Abdul-Karim

Project Brief

This open-source software has been adopted into work flows at Google, Uber, the New York Times, and Instacart. And for good reason. Lottie lets you make an animation inside After Effects, and export it to an iOS or Android app as part of an app’s actual interface. “Whereas in a prototyping tool like Framer, Sketch, or Principle, you make something and an engineer needs to recreate it, with Lottie, what you make goes exactly into the product as it is,” says Abdul-Karim.

Project Need

In the past, building complex animations for Android, iOS, and React Native apps was a difficult and lengthy process. You either had to add bulky image files for each screen size or write a thousand lines of brittle, hard-to-maintain code.

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets. Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin. The extension is bundled with a JavaScript player that can render the animations on the web.

User Experience

Frustrated by the design-to-development bottleneck experienced across the industry by people using After Effects to prototype their digital products, Abdul-Karim began to think. If he could use After Effects to build an app interface simulation or prototype, why couldn’t he just use After Effects to just make the real app itself?

Project Marketing

As mature as UI and app development may seem today–there are literally millions of apps available for iOS and Android–projects like Lottie prove that it’s still early days for the entire industry. There’s no logical reason that an amazing animation built inside After Effects can’t be the foundation for the next hit app, save for one: Our digital tools were constructed for another era, one that is fading away to obsolescence even faster than your current smartphone.