What is a Lottie?

The official guide to Lottie

A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation. LottieFiles lets you create, edit, test, collaborate and ship a Lottie in the easiest way possible.

Open-source and free Lottie players exist for the web, iOS, Android, Windows, QT, Tizen and other platforms.

How can I use a Lottie?

It’s easier than you think, with LottieFiles you can import and preview your Lottie animation and it will generate the lines of code that you can use to implement your animations in your projects. Alternatively, you can also download Lottie animations from our community and marketplace.

Where can I use a Lottie?

You can use Lotties on basically any platform: web or mobile. This means you can integrate them seamlessly into both apps and web pages. Lottie animations can even be used as stickers on messaging platforms. It isn't technically limited to web and mobile. You could use it on desktop apps as well as some watches

What can a Lottie do?

A Lottie animation can play your animation on web or mobile devices while still maintaining a nice high quality. It can also have smart settings that can allow for your animation to be interactive.

How big is a Lottie?

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.

The size of a Lottie file significantly increases download speed and reduces the amount of disk space utilised.

Why Lottie?

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 independent and scalable at run-time.

Its file size is super small

Allows for high quality animations on multiple platforms and resolutions by mixing vector and raster elements and applying transformations at run-time.

Exposes animation elements and parameters to use as targeting elements to add interactivity and manipulate at run-time.

Learn more about why you should use Lottie

The history of Lottie

2010

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

Developers would export animations in low quality formats or try to the best of their ability to reconstruct the animation design in code from scratch...Needless to say it wasn’t the most efficient process and often resulted in animations that were suboptimal and looked far from the motion designer’s intent.

2015

Hernan Torrisi conceived of the idea of exporting the representation of an animation in Adobe After Effects and rendering the animation at runtime. He leveraged the scripting abilities of Adobe After Effects to enumerate an animation project and released a plugin for Adobe 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 Salih Abdul-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.

Why is it called Lottie?

Lottie got its name from Charlotte ‘Lotte’ Reiniger, German film director and the foremost pioneer of silhouette animation.

World of Lottie

Lottie libraries and plugins available for free

Creation Tools

Implementation

Check out this curated awesome-lottie list

What is LottieFiles?

LottieFiles is a platform for testing, collaborating and discovering animations mainly catering to a community of animators, designers, developers and engineers (but we don’t discriminate so everyone is welcome!).

The platform offers a range of tools and features that aim to make the discovery, creation, and implementation of Lottie animations easier and more efficient. It is also the creator of the LottieFiles plugin for After Effects which among other features also helps convert your animation file into a Lottie file.

What is the difference between Lottie and LottieFiles?

Lottie refers to the animation file and LottieFiles is the platform on which you can test and share Lottie animations.

Is LottieFiles by Airbnb?

No, LottieFiles is independent of Airbnb but what we created here at LottieFiles is run on libraries created by developers who at the time of creation worked at Airbnb. Meet the team behind LottieFiles here.