Lottie: create interactive and lightweight animations for web and mobile applications

History

It all started with Airbnb. You know, that little company that offers seasonal rentals.

With its business based exclusively on a website and mobile applications, they need to have the best possible experience on all platforms.

And to do that, they need to optimize their presentation. Their design in particular, and all the elements that make it up.

To make the experience perfect, what could be better than animated, interactive interface elements whose quality doesn't depend on screen resolution?

The solution lies in the use of vector animations.

Adobe Flash (now Animate) showed us that it was possible to have light, interactive vector animations on websites.

Unfortunately, it is no longer possible to use it for security reasons, and iOS has banned its use.

So how do you integrate vector animations into a web page or mobile application today?

The solution lies in one of the most widely used languages on the Internet: javascript.

But animators aren't developers! Using Javascript to create animations is an ordeal. Here's an example of what you need to produce a very simple javascript animation.

Complicated, isn't it?

So how can 2D animators and developers work together without losing their hair?

Research & Development

2D animators working on interfaces (User Interface or UI) love After Effects software, because it enables them to quickly test how interfaces work in line with the desired user experience.

Another advantage of After Effects is that it is designed for the development of complex plug-ins. The link between animation and development lies in this software.

Now we need to agree on the format in which these animations will be exported.

Vector images, as I explained in a previous article, are made up of anchor points and bezier points, and therefore of coordinates in space, and therefore of numbers.

Open an SVG file in a text editor and you'll see (almost) nothing but numbers.

Since Javascript is the default language for web interactions, all you need to do is use a data format that can be quickly read by Javascript, namely JSON (JavaScript Object Notation).

A JSON file is basically just a text file containing data that can be easily read by Javascript.

Solution

So we have the animation software (After Effects), and the data format usable by developers (JSON).

All that's left is to develop an After Effects plugin that can export to JSON. And that's exactly what Hernan Torrisi has done.

The plugin Bodymovin plugin is born.

Okay. But try opening a JSON file with Photoshop, Illustrator, or any other graphics program!

Impossible.

That's normal: like SVG, JSON is made up of nothing but incomprehensible numbers. Only a Javascript program can deconstruct it.

And that's exactly what the Airbnb team came up with.

Lottie was born.

For the record, its name comes from the first name of director Lotte Reiniger, who made the second animated feature, The Adventures of Prince Ahmed, 10 years before Walt Disney!

Lottie is a Javascript script that you place on your website or mobile application, which reads your JSON file and transforms it into a readable format (SVG, Canvas or HTML).

In a nutshell, Lottie is a JSON file reader exported by Bodymovin.

And as this player is written in Javascript, you can control this animation. The controls available are fairly limited, however: you can control how it plays, how it stops and how it plays the animation. You can't control the objects inside the image.

Implementation

To produce a Lottie animation and place it on your website or application, you will need :

1. Download Adobe After Effects
2. Download the Bodymovin plugin and install it in After Effects
3. Create your own shape animation in After Effects
4. Export to JSON with Bodymovin
5. Import the script into your platform: for the web, for iOS, for Android or even React Native. But there are many others.
6. Import your JSON file like any other image and write a small Javascript script to read the file using the script.
7. Publish it.

For the web, everything is explained very simply here.

Lottie vs GIF

Lottie can read vector animations, making the JSON file very lightweight.

A GIF, whether transparent or not, contains the information for each pixel. A square image 100 px wide (which is small) will therefore contain 10,000 pixels, each with color information, and this multiplied by the number of frames the animation contains. It will therefore be very heavy.

For the same size, a GIF can be 10 to 20 times heavier.

On the other hand, a Json file is much more controllable than a GIF file.

Finally, a vector animation is not resolution-dependent: it will always be in high definition, unlike a GIF which, once the pixel is enlarged, will appear to be of poor quality.

Limitations

Certain limitations exist due to the integration of Bodymovin functionalities.

After Effects allows the use of expressions, layer links, masks, plugins and much more, which Lottie doesn't always understand.

Each platform therefore has its own specific features, as each has its own library: iOS, Android, and React Native.

For a complete list of these limitations, please refer to this table.

Lottiefiles and Webflow

You have to be careful because Lottiefiles has nothing to do with Airbnb.

Lottiefilesis a platform that helps you optimize your Json files, collaborate and edit them.

If you want to buy Lottie files, Lottiefiles will refer you to Iconscout, a marketplace they've bought, which was originally intended for static icons.

I've also created a space to offer you my own files.

Nevertheless, they offer interesting tools for testing animations for smartphones, and their After Effects plugin (based on Bodymovin) is easier to use than Bodymovin.

As for Webflow, it's a code-free website production platform. A no-fuss Wordpress. And the Lottie script is already integrated. So all you have to do is import your JSON file like any other graphic element and place it on your page.

Webflow and Lottiefiles are very handy for sharing these special files with your customers (they are unreadable by Powerpoint or Photoshop, for example).

Conclusion

Lottie is an excellent technology for perfecting your website's animations, enhancing your application's user experience, or creating playful, engaging interactions.

If you haven't tried it yet, I invite you to give it a try now!