What is a Lottie?

A Lottie is a JSON-based animation file format that allows you 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 on and ship a Lottie in the easiest way possible.

Why Lottie?

Here are a couple of advantages that Lottie has over the other animation file formats out there.

Small file size

Lottie animations are much smaller while retaining the same quality compared to other formats like GIF or MP4.

Infinitely scalable

Lottie animations are based on vectors, which means you can scale them up and down without worrying about resolution.

Multi-platform support and libraries

For all the developers out there, Lottie handoffs are super easy. You can use Lottie animations on iOS, Android, web and React Native without modification.

Interactivity

In Lottie animations, the animation elements are exposed so you can manipulate them to be interactive and respond to interactions like scrolling, clicking, and hovering. Learn more in the Interactivity Guide.

What is dotLottie?

dotLottie is an open source file format that aggregates one or more Lottie animations and their associated resources into a single file.

They are ZIP archives compressed with the Deflate compression method and carry the file extension of ".lottie".

GIF • 598 KB

Lottie JSON • 66 KB

89% smaller than GIF

dotLottie • 8 KB

99% smaller than GIF

The world uses Lottie

Lottie is used by + companies worldwide and in many of the tools you use every day.

A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
Apple Landing Page with Lottie Animation
Apple Landing Page with Lottie Animation
Apple Logo
Apple Logo

Landing pages

Landing pages

Landing pages

Duolingo with Lottie Animation
Duolingo with Lottie Animation
Duolingo Logo
Duolingo Logo

Add delight to digital experiences

Add delight to digital experiences

Add delight to digital experiences

Telegram Stickers with Lottie Animation
Telegram Stickers with Lottie Animation
Telegram Logo
Telegram Logo

Animated stickers in messaging

Animated stickers in messaging

Animated stickers in messaging

Samsung Watch with Lottie Animation
Samsung Watch with Lottie Animation
Samsung Logo
Samsung Logo

System animations for smart watches, TV, and appliances

System animations for smart watches, TV, and appliances

System animations for smart watches, TV, and appliances

Interactive Infographics with Lottie Animation
Interactive Infographics with Lottie Animation
The Guardian Logo
The Guardian Logo

Interactive infographics

Interactive infographics

Interactive infographics

Product Walkthroughs with Lottie Animation
Product Walkthroughs with Lottie Animation
Google Logo
Google Logo

Product walkthroughs

Product walkthroughs

Product walkthroughs

Motion is the future of design

…and LottieFiles makes it easy.

How to get started with Lottie

Tools and resources to help you get started with using Lottie.

STEP 1

Find or create a Lottie

Find a Lottie animation

Search our library of ready-to-use, free animations.

Then customize any Lottie to your brand or preferred colors by using the Color Palette tool or the Lottie Editor.

LottieFiles featured animations page
LottieFiles featured animations page
LottieFiles featured animations page

Or create a Lottie from scratch

If you have some animation chops, create a Lottie with our Adobe plugins. Otherwise, just grab an SVG and apply some presets to it with our SVG to Lottie converter.

STEP 2

Use your Lottie

Lottie is also supported natively on many other tools

Various company logos
Various company logos

Ready to get started with LottieFiles?

Join 4 million+ users worldwide and bring motion to your every design.

The history of Lottie

The history of Lottie

The history of Lottie

The history of Lottie

Stylized pixellated flower
Stylized pixellated flower
Stylized pixellated flower

2010

Before Lottie, motion designers were creating their animations and passing them over to software developers for implementation. Options for implementation were limited. Developers would export animations in low quality formats or try to reconstruct the animation in code from scratch. This wasn’t efficient and often resulted in animations that were suboptimal and looked far from the motion designer’s intent.

2015

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 After Effects to enumerate an animation project and released a plugin for After Effects called Bodymovin that exported the JSON format description of an animation. He also released the first ever renderer for the format with a JavaScript-based player for browsers.

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 After Effects to enumerate an animation project and released a plugin for After Effects called Bodymovin that exported the JSON format description of an animation. He also released the first ever renderer for the format with a JavaScript-based player for browsers.

JSON file
JSON file
JSON file
Pencil with Lottie written out
Pencil with Lottie written out
Pencil with Lottie written out

2017

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

Rocketship with LottieFiles logo
Rocketship with LottieFiles logo
Rocketship with LottieFiles logo

LottieFiles launched!

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

2018

2018

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

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

Window with flowerpot
Window with flowerpot
Window with flowerpot
Hamster wheel with a Qt file running on it
Hamster wheel with a Qt file running on it
Hamster wheel with a Qt file running on it

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

2020

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

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

Lottie illustration
Lottie illustration
Lottie illustration

FAQ

FAQ

What is a Lottie animation?

What is a Lottie animation?

What is a Lottie animation?

What is a Lottie animation?

Is Lottie better than SVG?

Is Lottie better than SVG?

Is Lottie better than SVG?

Is Lottie better than SVG?

Is Lottie better than GIF?

Is Lottie better than GIF?

Is Lottie better than GIF?

Is Lottie better than GIF?

How do you use Lottie?

How do you use Lottie?

How do you use Lottie?

How do you use Lottie?

How do you make a Lottie?

How do you make a Lottie?

How do you make a Lottie?

How do you make a Lottie?

Why should I use Lottie?

Why should I use Lottie?

Why should I use Lottie?

Why should I use Lottie?

Who can use LottieFiles?

Who can use LottieFiles?

Who can use LottieFiles?

Who can use LottieFiles?

Where can I learn more about Lottie animations?

Where can I learn more about Lottie animations?

Where can I learn more about Lottie animations?

Where can I learn more about Lottie animations?

How do I edit Lottie animations?

How do I edit Lottie animations?

How do I edit Lottie animations?

How do I edit Lottie animations?

Create. Collaborate. Ship.

Effortlessly bring motion to your everyday designs.

Create. Collaborate. Ship.

Effortlessly bring motion to your everyday designs.

Create. Collaborate. Ship.

Effortlessly bring motion to your everyday designs.

Create. Collaborate. Ship.

Effortlessly bring motion to your everyday designs.

Motion is the future of design

Motion is the future of design

…and LottieFiles makes it easy.

…and LottieFiles makes it easy.

Landing pages

Add delight to digital experiences

Animated stickers in messaging

System animations for smart watches, TV, and appliances

Interactive infographics

Product walkthroughs