Introduction to Lottie

The Lottie format enables designers to create and deploy advanced and visually refined animations without the need for a development team. In fact, with Lottie, you can easily add lightweight and easily scalable animations to any native application, making it more appealing to users. Check out what else you should know about the Lottie files and learn how you can use them effectively in your project.

What is Lottie?

Lottie is a JSON-based animation file format that allows designers to upload animations to any platform with the same ease as uploading static assets. These are small files that work on any device and can easily be scaled up or down without pixelization.

Lottie's origin story

Lottie takes its name from an initiative by Hernan Torrisi, who came up with the idea of exporting animation representations in Adobe After Effects and rendering the animation on the web. He used the scripting capabilities of Adobe After Effects to transfer the animation design and released a plug-in for Adobe After Effects called Bodymovin that exported the animation in the JSON format.

Airbnb developers Brandon Withrow, Gabriel Peal, and Leland Richardson recognized the potential of JSON-based animations, noting that they can also solve existing problems. The developers decided to team up with Airbnb's lead animator, Salih Abdul-Karim, to help them create iOS and Android libraries (called "Lottie") that could render these animations across platforms.

Advantages of using Lottie in your project

Lottie is a lighter alternative to animated GIF and PNG files, and by placing a reference to JSON in the code of the page, it has a positive impact on the speed of loading the frontend layer of the application. What other advantages does this solution bring? Lottie also provides:

• being multi-platform – the designer creates one animation that can be used on iOS as well as Android, Web or React Native;
• scalability – basing animations on vectors gives the possibility of their quick adjustment without loss of quality;
• smaller file size – Lottie files are several times smaller in size compared to the GIF or PNG format.

Animation creation process

When planning to create an animation, it is advisable to think meticulously about the whole project at the beginning and choose the most appropriate solutions that will allow its smooth implementation. To do this, you need to think about several key issues related to the next steps in the process of creating an animation.

What do you want to animate?

If you want to create an animation, the first step should be to prepare the project and draw the things that you plan to animate. For this purpose, you will need a proven graphics program such as:

• Figma,
• Sketch,
• Adobe Illustrator,
• Adobe XD. This is because all of the above programs have a plugin to easily export your animation element to Adobe After Effects.

In what program should you animate your design?

In the early days of Lottie, animations were created in Adobe After Effects because of its integration with the Bodymovin plugin. Currently, there are several software products on the market that allow you to conveniently export animations directly to the Lottie framework. These include:

• After Effects + Bodymovin,
• FrameX,
• ProtoPie,
• Animator by Haiku,
• Flow. In the rest of this article, we will particularly focus on Adobe After Effects, as it gives you the most options for animation.

Export to AE

If you created the design of your animation in Figma or Sketch, you need to use a plugin called AEUX. This is of course a free plugin that transfers your vectors to AE.

If, in turn, you have a project in Adobe XD, then exporting to AE is very easy and convenient due to the fact that they are products of the same company.

Exporting files from Illustrator is a little different. This task turns out to be a bit more difficult because it requires exporting the design as SVG and then transferring it to AE. Although inserting the Illustrator file directly into AE gives you the ability to animate, it does not allow you to export it to Lottie.

Animating in AE

Adobe After Effects is a very complex tool that offers a lot of possibilities in terms of animating and applying different effects to create your animation. When it comes to Lottie, you cannot use all of the available options. Different platforms allow for the use of different options. So it's worth checking the full documentation of supported effects beforehand.

When the animation is ready and the result is satisfactory, then it is time to export it. The necessary tool for this is an AE plugin called Bodymovin.

Animation tests

Before you send your animation for implementation on different platforms, you should test it every time. LottieFiles service and native players, which are available for download here, turn out to be useful in this regard.