Lottie animations

What is it?

Lottie is a multi-platform library created by Airbnb that exports After Effects animations as light-weight JSON files through Bodymovin, an open-source After Effects extension. Lottie loads the animation data in JSON format, and renders the animation in real time through web and mobile interfaces.

What are the advantages of using Lottie animation?

  • It ‘s resolution independent and scalable at run-time, making it easy to use animation in apps
  • It works on multiple platforms: iOS, Android, web and React Native
  • Small file sizes – animation values are stored in JSON file
  • It supports solids, shape layers, masks, alpha mattes, trim paths and dash patterns (however, it’s not working with screen transitions)
  • It can be programmed to respond to interaction

How do I get started?

Visit Airbnb’s Lottie page where you will find all the links and information to start using Lottie animation in your apps.

There are also lessons available on LottieFiles which has the largest repository of Lottie/Bodymoving files. So take the time to watch the lessons by Airbnb Design Lead, Salih Abdul Karim A beginner’s guide to Lottie and learn to create your first Lottie animation.

What about websites?

Good news! Lottie animation can also be embedded on websites. Adding nice animations to your site is only a few clicks away.

I am currently using the plugin Lottier to render the animation above. It is connected to a JSON animations library from LottieFiles.

But you can also use their web-player and embed the generated code to your site, like the animation below.

This is the code used for the animation above. Cannot get much easier!

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets2.lottiefiles.com/packages/lf20_w4dggajd.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay></lottie-player>

Here are some more resources about Lottie animations: