Introduction to Lottie

Now that we know each other a bit better, let's see what all this Lottie fuss is about. Let's start from the beginning and talk about a bit of history.

Why is it called Lottie?

The name Lottie was chosen as a tribute to Charlotte "Lotte" Reiniger, a German film director from the 20th century who became the foremost pioneer of silhouette animation. This is a technique based on cut-out figures that are moved frame by frame and filmed with a camera.

The man behind the scenes

After Apple decided Macromedia Flash wasn't going near any iPod or iPhone, adding animations to our applications and websites became a nightmare. Animations had to be exported in low-quality formats; otherwise, developers had to recreate the code themselves. You can imagine how many of these ended up: the file sizes were too big, visualization was really poor, the process was painful, and the results were frustrating.

But then, in 2015, Hernan Torrisi, who had been working as an Action Script developer, came up with an idea. He started building a player and an exporter for After Effects, and this is where the Bodymovin plugin came to life. To be clear, the Bodymovin plugin transforms the animation into a JSON file, but we will talk about that later.

Torrisi also developed a browser-based renderer that takes the Bodymovin plugin's JSON files and plays back the animation.

Then, when Airbnb engineers Brandon Withrow (on iOS), Gabriel Peal (on Android), and Leland Richardson (on React Native) realized the power of these JSON-based animations, they decided to partner with animator and experienced designer Salih Abdul-Karim to help develop Android, iOS, and React Native renderers for the Bodymovin plugin's JSON.

Meanwhile, the LottieFiles platform was also launched, and a great community of animators, designers, and developers was born. Here, they could preview, test, and share their own animations.

In 2020, dotLottie was created as a way to standardize the format.

In early 2021, the same team came up with the LottieFiles plugin, which works just as well as Bodymovin. Both export animations in .JSON format; however, the LottieFiles plugin adds some extra features, which we will cover in more depth soon.

What is Lottie?

Figure 1.1 – The Lottie icon

It took me a while to understand what Lottie is exactly. There are lots of conversations going on out there about Lottie, LottieFiles, Lottie file, Lottie animations, dotLottie, and the LottieFiles plugin that can, sometimes, get a bit confusing.

Essentially, Lottie is a library for iOS, Android, and React Native that will convert the animations that we will be creating in Adobe After Effects into lines of code. It does this very easily and without the need to write any code at all; we do it by simply installing an open source plugin into After Effects and pressing a button to render our animations and then exporting them as JSON. It's like magic, right?

If you are a designer (or a developer who is willing to get creative), that means that you will be able to create your own fantastic animations using After Effects and export them in seconds, without needing a developer to code them.

If you are a developer, that means that you will no longer have to code the animations, saving you tons of time, and you will be able to implement the animations on any website or app effortlessly.

And the best of it? The animation will look as it should, the file size will be kept small, and the image will be scalable. So, it is a win-win for everyone.

Now, to clarify and summarize, initially, Lottie was used to name a library for iOS, Android, the web, and Windows. But today, it is commonly used to call the .JSON file that is exported from After Effects, which is also known as the animation file.

The following diagram depicts the advantages of LottieFiles:

Figure 1.2 – Some of the key advantages of working with Lottie files

Do you still need more reasons to start using Lottie?

Yes, we are in love with Lottie and won't stop talking about how its appearance has made the lives of all our teams easier. And here is why.

It's very easy to use

Animating with Lottie is as easy as following a few simple steps:

1. Create your animation in After Effects.
2. Render and export the animation using the LottieFiles or Bodymovin plugins (we will talk about this in more depth later).
3. Test the animation in LottieFiles Editor to check everything is in the correct place.
4. Add the .json file to our web or app platform, and we are done:

Figure 1.3 – After Effects, the Bodymovin tool's icon and the .JSON format file

It can be used everywhere

Lottie is multiplatform and open source. It can be used on any web or mobile platform. We can even create and run Lottie as stickers on messaging platforms such as Telegram or use them in desktop apps or watch apps:

Figure 1.4 – Multiplatform

The file size won't be a problem anymore

Since Lottie is a vector-based animation, you can imagine that the file size will be very tiny. So, forget about old and heavy PNG or GIF files that can make our products look poor and low quality:

Figure 1.5 – The PNG and GIF image file formats

Interactive and dynamic

Lottie is not only made up of endless cool animated loops. It can also be used in so many ways to provide its users with some interaction. For example, we could sync our animations to the scroll of the page and see how it goes back and forth while scrolling.

Additionally, we could create a loop from one specific frame, play segments on hover, or sync the cursor position with our animation. Imagine some cute panda eyes following the user's cursor; how cool is that?

Figure 1.6 – Interactive features

Scalable

Another advantage of a vector animation file is that it can be scaled as much as you wish without becoming a pixelated image. Additionally, it is responsive, will scale up or down, and will adapt to our designs as needed. So, don't worry about pixelated images in your web or mobile applications. From now on, they will look stunning and take your UX to the next level:

Figure 1.7 – A vector versus a rasterized image visualization

So, now that we've cleared up what Lottie is, let's move on to LottieFiles and its features.