Lottie by Airbnb

Embed animations on your sites has never been easier. Thanks Airbnb for creating Lottie! And ng-lottie to manage it by Angular.

Robin Coma DelperierConsultant Frontend

- Skateur & bricoleur du dimanche. Toujours prêt à innover pour inventer de nouvelles applications dès le lundi! -

We discovered Lottie last month and we want to use it everywhere!

That's why we want to share this experience.


What is Lottie ?

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Lottie has a library for Web Apps too : lottie-web.

Why Lottie ?

Lottie allows you to use your favorite after effect features to generate very small JSON files. These JSON files can be played on IOS, Android, React Native and JavaScript forwards or backwards, and also respond to events.

How it is works ?

Lottie How it is works

Web Demonstration

Import Lottie Web on npm:

> npm install lottie-web

Get the library script:

<script src="node_modules/lottie-web/build/player/lottie.js" type="text/javascript"></script>

Use a component:

<div id="lottie-element"></div>

Bind the animation:

  container: document.getElementById('lottie-element'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: ''

Enjoy the result:

See it in action with Angular and ng-lottie on our home page


Community files

You can find community files here and submit yours :

Layer edition online

The layer edition allow you to update colors off existing animations :

Lottie Search

Demonstration with the loading animation founded here. Colors could be updated online before download the JSON animation file on

Lottie Search

An example with the PlaceMe theme loading bar:

Before After

Others examples

Robin Coma Delperier

Consultant Frontend


Logo PlaceMe

Accompagne vos projets digitaux

Frontend Backend Cloud DevOps

27 rue des blanchers

31000 Toulouse