If you think that Airbnb only offers accommodation rentals, think again. They also develop a program that almost has nothing to do with house rentals called Lottie. It is a React Native, Android, and iOS JavaScript library used to add animation to the website or mobile applications.

With Lottie, designers can directly export animation from Adobe After Effects to JSON file using an extension called Bodymovin. Then, users can instantly use it with the framework.

How Does Lottie Work?

To use Lottie, you need to create an animation in Adobe After Effects beforehand. Remember to use vector tools and don’t use bitmap images since Lottie doesn’t support this type of image. However, this tool supports plenty of shapes, such as solids, shape layers, alpha mattes, masks, trim paths, and dash patterns.

When the animation is ready, the next thing to do is export it through Bodymovin After Effects plugin. Voila! Now you have a JSON file that is only a few kilobytes. Then, you can use the Lottie framework to parse this file into your app and website. It is simple and easy!

Pros and Cons of Lottie

There are plenty of reasons why this Animation Framework is amazing. Here are some of them:

1. Smooth Workflow

Lottie animation is easy to use, and it can be converted into code accurately and quickly. Therefore, it offers a smooth workflow, and developers can use this framework to turn the designer’s ideas into reality.

2. Animation Values Storen in JSON file

Other similar tools only show a few or the majority of animation values. This can be troublesome if you want to work on these animations. However, Lottie stored all animation values, such as position, timing, graphic, and digits, in the JSON file. Therefore, you will not need to install a different program to view the source file.

3. Rich Animation with Less Effort

Lottie provides rich animation with less effort. Therefore, designers will have the opportunity to create rich animation with complex interactions. Additionally, the developers don’t need to code every single line and effects to animate the animation.

4. Blending Modes

With Lottie, you can blend modes without having to merge the layout. This definitely saves a lot more time in the designers’ and developers’ workflow.

5. Only Works with After Effect

Although this tool is a smart solution, unfortunately, it only works with After Effect. You cannot use it with other third-party solution, such as Principle or Flinto. Since it works with After Effect, it also comes with all other drawbacks associated with this program.

While there are plenty of plugins available to overcome the drawbacks, many plugins for After Effect are chargeable. This is certainly not flexible enough, especially if you need a few plugins.

6. Limited animation

Another drawback to consider is the limited animations they have. With Lottie, you cannot create a beautiful transition between screens and only work with animation on the current screen.

Just like other animation frameworks, Lottie offers many pros and has its cons. You will need to play around with Lottie to understand if it is the perfect tool for your team.