What Is Lottie? A Beginner's Guide to the Lottie Format

Lottie has emerged as a widely supported and appreciated format across the whole design industry. In this comprehensive beginner’s guide, you will explore how Lottie came to be, how it smoothly fits into different platforms, and why it's so awesome. We'll break down the perks, compare it with other formats, and throw in some fun examples.

May 21, 2024 - 04:26

May 21, 2024 - 04:25

0 190

Lottie has emerged as a widely supported and appreciated format across the whole design industry. In this comprehensive beginner’s guide, you will explore how Lottie came to be, how it smoothly fits into different platforms, and why it's so awesome. We'll break down the perks, compare it with other formats, and throw in some fun examples.

What is Lottie?

Lottie is a JSON-based file format used for high-quality animations. It is designed for cross-platform use, allowing seamless integration into web and mobile platforms. It is small in file size, infinitely scalable, and easy to implement by developers. The format can also include raster graphic elements, and it supports interactivity and programmability.

What’s the history of the Lottie format?

Lottie’s history dates back to 2015 when Hernan Torrisi released a plugin named Bodymovin. This plugin exported animations made in Adobe After Effects as JSON files, rendering them at runtime. Before this invention, there were limited options for implementation, and the whole integration process was poor.

Motion designers passed their animations to the developers who had two options:

They could either export low-quality animations.
Try to reproduce them from scratch, using their coding skills.

Unfortunately, this resulted in suboptimal animations :(

In 2017, Engineers Brandon Withrow, Gabriel Peal, and Leland Richardson from Airbnb discovered the potential in Torrisis’s solution and, together with their lead animator, Salih Abdul-Karim, they built iOS and Android libraries that could render these JSON animation files. They called them Lottie, named after Charlotte "Lotte" Reiniger, a German pioneer of silhouette animation.

In the same year, LottieFiles was launched. This was a dynamic platform that allowed animators and developers to showcase, test, and share their animations.

In the next few years, several companies created libraries for rendering Lottie, for example, Windows and .NET Foundation. In this way, Lottie became a widely supported and frequently used format that bridged the gap between motion graphic design and web/app development.

In 2020, dotLottie was created, providing an open-source file format that compresses one or more Lottie files into a single file.

It was also recently announced that there's a coordinated effort in progress to make Lottie into an open file format. Check out the article below for more information.

*News about Lottie becoming an open file format.*

What makes Lottie files so popular?

Lottie files are so popular due to their ease of use and simple integration into digital platforms. They allow designers to create engaging and interactive animations that can be integrated into mobile apps as well as websites without any compatibility issues. They are compact files that are compatible with all devices and scalable up to infinity without pixelation.

Which platforms support Lottie?

Lottie is supported by Android, iOS, Windows, and by the web:

Its native support for Android and iOS lets developers easily integrate engaging and captivating animations for their mobile applications. The cross-platform compatibility ensures consistent user experience on various devices.
Lottie is also a popular format in web development because the animations can be directly embedded into the web pages, and they are also interactive. Windows-based applications can integrate Lottie too, making it a valuable asset in software creation.

Animated smiling heart across devices - Made by SVGator — *Animated smiling heart across devices*

What are the main benefits of Lottie?

The main benefits of Lottie as a file format are the following:

Compact file size
Infinite scalability
Multi-platform compatibility
Flexibility
Collaborative potential

Lottie bridges the gap between motion graphic designers and developers, speeding up the web development process. Lottie’s library renders animations in real-time and can be easily modified without having to re-export the entire animation. It also supports interactivity, providing an engaging user experience and improving user retention.

The main benefits of Lottie animations are detailed in the below table:

Small file size ?	Vector-based ♾️	Multi-platform support ?	Interactivity ?
Lottie animations are an efficient solution for web and mobile applications due to their compact file size. They load faster than other, heavier animation formats, and they take up less storage space.	Lottie animations are infinitely scalable, which makes them ideal to be displayed on various devices and screen sizes without losing quality and resolution.	Another advantage of Lottie’s libraries is that they can be easily integrated into various platforms such as iOS, Android, web, and React Native. This feature significantly reduces development time and simplifies the whole process.	Lottie animations support interactivity, so they can be triggered on scroll, click, and hover. They offer a dynamic and engaging way to enhance user experiences on websites and applications.

The main benefits of Lottie animations

Another advantage of Lottie’s libraries is that they can be easily integrated into various platforms such as iOS, Android, web, and React Native. This feature significantly reduces development time and simplifies the whole process.

Why use Lottie animations?

In short, you should use Lottie animation because they can be played anywhere, they are easy to maintain and edit, and they offer great quality, scalability, and small file size, so they are perfect for your web or mobile application projects.

Here are 5 reasons for using Lottie:

1. It is widely supported

Lottie animations can be played anywhere because they are compatible with all modern browsers that support Javascript. Libraries are also accessible for mobile applications and the majority are rapidly embracing Lottie animations to enhance their user interface.

2. A Lottie file is plain text

Lottie animations are easy to maintain because they are saved as human-readable plain text. This reduces debugging time and overall deployment duration. Moreover, they do not require any special software for adjustments. Lottie animations are formatted as JSON, allowing seamless integration into JavaScript or any other application development environments.

3. It is dynamic and scalable

Lottie stands out as the most dynamic animated graphics format in use today. Its JSON structure makes it easy to manipulate and replace various levels of details. Furthermore, Lottie minimizes storage and loading times.

4. It has great quality

Lottie is a vector-based format, which means that it looks good on any screen and won’t get pixelated no matter how much you scale it. The rendering will always be done at the screen’s native resolution.

5. It’s smaller than other formats

Lottie animations can be 600% smaller than other image formats, such as MP4 and GIF while retaining the same quality. In general, they are 50% smaller than an average PNG, and they can be optimized for an even smaller footprint.

Hand holding a small Lottie icon

What are the differences between Lottie and other image formats?

There are significant differences between Lottie and other image formats regarding aspects such as size, quality, and color accuracy. Overall, we can claim that Lottie is taking over the animation market for web, Android, and iOS because it's the best solution.

Below, you can find a short comparison of the strengths and weaknesses of each wide-spread image format:

Lottie vs PNG (PNG sequence)

Below is a table comparing Lottie files and PNG files:

Lottie	PNG (PNG sequence)
Vector-based graphics, infinitely scalable	Raster-based graphics, made up of a fixed number of pixels
50% smaller than an average PNG	Tend to be large due to lossless compression
Easy to animate and edit	More difficult to animate and apply changes later
Can be easily integrated into applications using libraries	PNG sequence implementation involves several additional steps and more coding
Lottie files take less disk space resulting in faster loading times	PNG sequence will make your page load slower
Supports interactivity	Doesn’t support user interactions

Comparison between the Lottie format and PNG format

Lottie vs GIF

Below is a table comparing Lottie files and GIF files:

Lottie	GIF
Vector-based graphics, infinitely scalable	Raster-based animation files, made up of a fixed number of pixels
Can be 600% smaller than a GIF, and it’s faster, too	Large file size, slower load times
Supports looping, playback, speed control, and layer properties	Loops continuously, so there’s no opportunity to pause it
Flexible, easy to customize	Impossible to make changes once it’s done
Supports transparency and interactivity	Doesn’t support transparency and interactivity

Comparison between the Lottie format and GIF format

PNG vs GIF vs Lottie comparison - Made by SVGator — *PNG vs GIF vs Lottie comparison*

What are the disadvantages of Lottie?

Lottie has received mainly positive responses in the design and development industry. Of course, there are a few limitations and shortcomings.

For example, Lottie’s library doesn’t support some functions of After Effects, such as Expressions or Effects, Blending Modes, Luma Mattes, and Layer Effects.

Adding extra keyframes to your animation can result in a larger file size, so during the creation process, you should pay attention to every aspect in order to get a lightweight Lottie file at the end. You should avoid using presets like Wiggler and Autotrace and animating along a path because these can add useless lines of code to your Lottie file.

If you want to learn more about the limitations, you can check this Lottie supported features table.

However, when considering the broader perspective, the overall benefits outweigh these minor drawbacks to a considerable extent.

What use cases does Lottie have?

There are countless creative use cases for Lottie animations in mobile applications and websites, some of them being the following:

Presentations slides
Social media posts
Animated icons and buttons
Loading animations
Onboarding tutorials
Background animations
In-app animations
Animated website illustrations
Stickers
Infographics
Gaming assets
Ads

Using Lottie animations can increase conversions and user engagement because they evoke emotions and make the user journey more interactive.

Check out the section below to see a list of different Lottie animation examples for various use cases!

Examples of Lottie animations

Check out this list of Lottie animation examples, and hopefully, you'll be convinced of the versatility that the format has to offer:

Lottie loading animation

Lottie preloader examples made by Waqas Awan — *Lottie preloaders - made by Waqas Awan*

Loading animation example made by Mathieu Preau — *Loading animation - made by Mathieu Preau*

Made by Sigma Software Design

Animated Lottie icons

Animated line icons pack made by Eden Raymond — *Animated line icons pack - Made by Eden Raymond*

Web animation made in Lottie

Made by SQUARE43 STUDIO

Made by HAUS

Duck sneezing animation made by Wanda Arca — *Made by Union (Joins Valtech)*

Characters running & hugging made by Squid&Pig ❤ — *Made by Union (Joins Valtech)*

Gamba logo - Made by Ali Nazari

Landing page with Lottie animation

Made by Supercode Design

Made by Andriansyah

Lottie Website animation

Online learning animated landing page made by Vitra Alzmi — Online learning animated landing page - Made by Vitra Alzmi

Animated website animation example — Animated website animation - Source

Animated illustration in Lottie

Made by Oleg Erin

Lottie mobile app animation

Made by John Hughes

How to implement Lottie files?

The easiest way to implement a Lottie file to a website is to embed it. Lottie files are compatible with websites that utilize the oEmbed format: there are over 25,000 platforms including but not limited to Notion, Medium, Ghost, Reddit, and WordPress.

Alternatively, you can also copy the automatically generated code from Lottie Web Player and paste it into your HTML.

You can also add your Lottie to widely used design tools such as Figma or Adobe Xd, as well as to iOS and Android apps.

Lottie export is coming soon!

Soon you can export your animations made in as Lottie files. After several months of dedicated effort, we are excited to announce that we're close to completing the development process. If you want to be the first to try it, subscribe to our special notification and secure your early access!

Get notified when Lottie early access is available! ✋