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.

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.

Lottie Illustration

Why Lottie?

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

Umbrella Illustration

1.

It is multi-platform. You can use Lottie files on iOS, Android, web and React Native without modification.

Russian Doll

2.

It is resolution independent and scalable at run-time.

Magnifying Glass

3.

Its file size is super small

Fish

4.

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

Lego Bricks

5.

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

bananas

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

Lottie JSON File

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

Celebrating Lottie

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”.

LottieFile Illustration

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

2018

Windows & .Net

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

2019

Lottie Tizen and QT

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

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?

Lotte Reiniger Illustration

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

LottieFiles + After Effects

Bodymovin + After Effects

Create with Flow

Lottie Synfig

Lottie FramerX

Lottie Protopie

Lottie Keyshape

Lottie Haiku

Implementation

Lottie Android

Lottie iOS

Lottie Windows

Lottie Skia

Lottie ReactNative

Lottie NativeScript

Lottie QT

Lottie Angular

Lottie VueJS

Lottie Flutter

Lottie Xamarin

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.