What is a Lottie Animation?

Browsers and the web have long since supported animated graphics, however, the animation formats that browsers commonly accept, like GIFs, are old, have large file sizes, and have crippling limitations. While that hasn’t stopped experienced developers creating extremely animated websites, it’s meant that it often involves a technical programming skill set to create these design assets. Even though they are design assets that should really be directly in the hands of animators.

Similar restrictions exist in app ecosystems for phones, tablets, and computers, and while video can often be used as a substitute in these ecosystems (because they’re less limited by download speed than the web is), file size is still a relevant issue and animations still need to be specifically adapted or coded.

Lottie is a tool that helps smooth over some of these problems and can improve workflows around animation on the web and in app development. In this article, I’ll dive into its benefits and its limitations.

This isn’t a Lottie animation. It’s an animated gif screengrab of the fantastic Lottie example animation at airbnb.design/lottie

Lottie is a JavaScript library developed by a number of engineers at AirBnB to enable real-time rendering of After Effects animations in the browser and in apps. What this means is, instead of programmers having to create or recreate animations in the programming languages or toolsets of their platforms, they can simply import a file created directly in After Effects. it means the animation process can exist entirely in an animation program that animators are already familiar and comfortable with, and that animation can be developed in the same way regardless of the intended output platform.

Since it’s initial creation, Lottie has been released as an open source project, and has evolved to support more After Effects features and become more reliable. It has also been taken further and made more accessible to non-programmers through projects like LottieFiles.com.

In comparison to the traditional formats designers are used to on the web, like GIF and video, Lottie opens up a number of new possibilities.

The above Lottie animation was created by Andy Dao

Vector or pixels… Whichever you want

While GIF and video are both pixel based formats, Lottie is primarily designed to work with vector graphics. This means that Lottie animations can often be played at any size and still be crystal clear (with no increase in filesize)—whereas a GIF or video would need to be made at a resolution to suit the intended display size. In other words, gifs and videos are like Photoshop, and Lotties are like Illustrator.

But that doesn’t mean Lotties are limited to vector. The BodyMovin’ plugin for After Effects can export Lottie animations as vector or raster (pixels), and different approaches may work best for different animations. For instance, because vectors are more mathematically complex for a CPU to display on screen, complex vectors will often run better, or be lower in file size, if exported as raster, while for simpler graphics, exporting as vector is often better.

When exported as raster, however, Lottie animations still demonstrate the same improvements over legacy formats. While a video would need to record what every pixel looks like on each frame, a Lottie animation, even when referencing a pixel based PNG image, often only needs to record where that image is to be displayed in the animation and when—instead of any specific changes to pixels.

The above Lottie animation was created by Çağatay Metin

Straight from After Effects

Even though the code that plays Lottie animations is written in JavaScript, you don’t need to be a coder to use them. Plugins for After Effects do the legwork for you and turn your AE animation into files that are playable by that code.

As a developer, thats means you don’t have to rebuild the animation in an Authoring tool or manually with code, and as a designer or animator, it means you can animate in a tool you’re already familiar with and export the animation for immediate use with multiple different platforms. It also means that any After Effects animator or stock site can be used to create the animations.

The plugins for After Effects are free, creating minimal barriers for use. Both the original plugin, Bodymovin, and the LottieFiles plugin export to the same format but provide different levels of control over the export.

Clean transparency

Videos have limited transparency options, and depending on your authoring tool, you may not be able to take advantage of them anyway. And while GIFs support transparency, it is very rudimentary and aliased (jagged and sharp). Lottie, however, supports the same level of transparency used in After Effects itself. If a background isn’t included, it will be transparent, and if illustrations have varying levels of transparency, this will behave as expected as well.

Basic interactivity

While Lottie animations are not replacements for web pages or apps themselves, the JavaScript that plays them can be told to display player controls, start, stop, or loop playback at various times—or even provide more granular control over the playback.

Try hovering or clicking the above Lottie Icons.
These were inserted with the LordIcon WordPress plugin.

Lower file size

Like a an Illustrator file is often significantly lower in file size to a Photoshop file, so too are Lottie animations significantly smaller than videos and GIFs. The example below shows an animation created in After Effects using free assets from vecteezy.com. A comparison of the output file sizes when exported to different formats is also shown.

As a Lottie, this particular animation was not exported as vector, which, in this instance, enabled it to be even smaller and less CPU intensive, but it’s still HD quality and much lower file size compared to the other two formats.

While I created the above Lottie animation, the biplane graphic itself is from vecteezy.com

Note that while the JavaScript player is of significant file size (The 290kb file mentioned at the bottom right of the file comparison), even when combined with the Lottie animation, the two still amount to a much smaller file size than the alternative options. The player also isn’t a definite requirement. This is because the same player file is used for any Lottie animation included in your project—This means that it only needs to be downloaded once by the users device. If a user visits your page, their device may download the player file to show the first animation, however, for any subsequent animations, it is not needed again (Which can mean high quality animations of extremely little filesize).

And yet, even for viewing the first animation in your project, the player file is not always required. If the user has been to the page before, or even to another website that uses Lottie animations, it will not need to download it again.

The lottie player file
The player mentioned above is a JavaScript file that the page downloads automatically in order to interpret the Lottie animation file. This kind of JavaScript file is no different to the many other JavaScript files that web pages download in the background.

The Lottie animation above was created by Thaís Camir

Where’s the rub?

As seen above, there are lots of reasons why Lottie animations can be a fantastic way to display animated graphics in apps and on websites, however, there are positives and negatives to most technology and there are certainly aspects of Lottie that we need to be aware of.

CPU usage
Lottie animations are files that are interpreted on the users device by JavaScript. This means that the more complex the visuals, the more work the device’s CPU has to do to display them. For most use cases, this isn’t a problem, however, it’s important to keep in mind—The LottieFiles plugin for AE includes a CPU monitoring panel to help you check on this.

Limited effects
While a lot of animation techniques, expressions, and layer types in After Effects are exported by the plugin, not everything is. Many effects that directly manipulate pixels aren’t supported by the Lottie player and it can differ for each platform—so it’s important to keep that in mind when deciding how to animate.

More technical
While you don’t need to be a coder to create Lottie animations, embedding them in websites and apps can still be more technical than including a video or GIF. Some authoring tools remove this complexity for you, but if not, LottieFiles.com provides code snippets that help minimise the complexity—And I have a number of articles that also help.

It’s not video
While I’ve compared Lottie animations to video throughout this article, this is because video is often used as a way to bring motion graphics into the web. For many use cases, however, video is the most appropriate approach and the only valid solution. 3D motion graphics with complex layering of effects like you might see on YouTube will never be convertible to a Lottie , nor will that home video you shot on your iPhone. Lottie animations are primarily for animated illustrations.

The above Lottie animation was created by Nabil Mersni

That’s it!

In this article we looked at both the pros and cons of Lottie animations. Hopefully it helped you understand the versatility of Lottie and has peaked your interest to give it a go. If you work with code, it should be a fairly trivial task for you, but if you work with an Authoring tool, sometimes the tools might not have an obvious way to include Lottie animations. Don’t let that dissuade you too quickly as there’s often a way around it.

For more detail on finding stock Lottie animations or getting started on your own, check out this article. If you have a Lottie animation and you need some starter code to embed it, try this article.