Everything about Lottie Animation

4 min readNov 23, 2020

What is Lottie?

The Lottie is an open-sourced Android, iOS, Web, React Native, Windows, QT, and Tizen library that performs After Effects animations in real-time, which allows apps to use animations as they use images.

A Lottie is a JSON-based animation file format that enables designers to add animations on any platform as shipping static assets. Lottie files are small that work on any device and can adjust without any pixelation.

What can a Lottie do?

A Lottie animation can play your animations on the web or mobile devices while still keeping high quality. The smart settings on the Lottie animation allow your animations to be interactive.

How can I use a Lottie?

It’s easier than you think with Lottie files or animations, you can import and preview your Lottie files or animation, and you can download Lottie animations from the Lottie community and marketplace and use it in your applications according to your requirements.

Where can I use a Lottie?

You can use Lottie files on basically any platform: web or mobile. That means you can use them seamlessly in both apps and web pages. Also, It isn’t technically limited to web and mobile. You could also use it on desktop apps as well as some watches.

How big is a Lottie?

To understand it let’s break it down into an easily visualized representation.

If a PNG is a T-Rex and a GIF is an elephant, then a Lottie is a puppy.

How is it better than what’s already out there?

It is multi-platform. You can use Lottie files on iOS, Android, web, and React Native without modification.
It is resolution free and scalable at run-time.
Small in size.
Shows animation elements and parameters to use as targeting elements to add interactivity and manipulation at run-time.

History of Lottie

2010- Before Lottie, motion designers were creating their animations and transferring them over to software developers for implementation. Options for implementation were poor and limited.

2015- Hernan Torrisi thought of the idea of exporting the representation of animation in Adobe After Effects and executing the animation at runtime. He holds the scripting abilities of After Effects to specify an animation project and released a plugin for After Effects called Bodymovin that exported JSON format description of the animation.

He also released the first-ever renderer for the format with a Javascript-based player for the browser.

2017- Engineers Brandon Withrow, Gabriel Peal, and Leland Richardson at Airbnb saw the potential that JSON based animations presented and the problems it solved and partnered with the lead animator SalihAbdul-Karim at Airbnb to help build iOS and Android libraries that could render these JSON animation files, which they called “Lottie”.

LottieFiles launched giving animators and developers a place to instantly test, share, and showcase their animations on the web.

2018- Microsoft and the .Net Foundation released a library for rendering Lottie on Windows.

2019- Qt added support for Lottie by adding a QML API for rendering Lottie.

Samsung released rLottie a platform-independent C++-based renderer for Lottie and added Lottie support in Tizen.

2020- dotLottie was created. An open-source file format that aggregates one or more Lottie files and their associated resources into a single file. This will be the next generation Lottie file for the future of animation.