Lottie animation. How & Why to use it


Would you like to use animation on your website or APP? It used to be a difficult and time-consuming task. So complicated, many people preferred not to try.  But now there’s a practical solution called Lottie animation. 

What is Lottie animation?

Lottie is an open-source animation tool created by Airbnb design

Salih Abdul-Karim, an Experience and Motion Designer at Airbnb, describes Lottie simply as “an iOS, Android, and React Native library that renders After Effects animations in real-time”. 

Why is it so amazing? It allows native apps to use animations easily, almost as if they were static assets. Thanks to this tool it will no longer be necessary to dig through frameworks for reference, guess durations, or manually create Bézier curves. 

According to Abdul-Karim, “re-making animations with nothing more than a GIF for reference will be a thing of the past”. That’s right, Lottie allows engineers to “build richer animations without the painstaking overhead of re-writing them”. (See an example of how complex it can be to create the code for a simple animation without using Lottie). 

The open-source library is already flexible and rich. Although it has some limitations, it aims to integrate many more features with the help of collaborators from all over the world. Currently, it supports a wide variety of types of animations, from basic line art to character-based animations, and dynamic logo animations. Plus, the Lottie Sample APP includes some built-in animations, simple source code samples, that can be used as references.

Why is it called Lottie?

Its name is an homage to german film director Lotte Reineger, the pioneer of silhouette animation, creator of the oldest surviving feature-length animated film The Adventures of Prince Achmed (1926).

How does Lottie work? 

  • Step 1. A motion designer creates a cute animation on After Effects.
  • Step 2. The animation is exported as a JSON file using an extension called Bodymovin, created by Hernan Torrisi.
  • Step 3. A developer “drops” that file into their app’s assets folder and references it from a LottieAnimationView.

The advantages of using Lottie animation

Modern pizzazz. Lottie can be used to animate icons, logos, or any website element you would like to enhance. 

Great UX. When used right, Lottie animations can polish your user interface and make digital products (websites or APPs) more understandable, intuitive and fun.

Easy to use. The main benefit is that your development team will save time and avoid many headaches. This cross-platform tool is so easy to use, it almost feels like cheating, says Nick Butcher, Android designer + developer at Google.

Save money. Achieving a flexible animation format that is playable on multiple platforms can be very expensive if you choose the traditional route. With Lottie, you can personalize everything you want and add a customized design to your APP and website without busting your budget. Using Lottie is so efficient, it’s also cheaper.  

How to use Lottie on your website or APP

If you are considering using Lottie animation on your website or in your APP, you will need to consult with a team of developers and animators that have previous experience with the tool. They can help you figure out the best way to incorporate animation without busting your budget. 

Lottie is a relatively new tool, so not everyone knows how to use it well. If you want expert help with Lottie animation, consider contacting our team at Arigato Studio. We have used Lottie on several projects, including our own website and we are well versed in the tool ́s features. Check out our portfolio. 

Featured articles