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 Delperier

Consultant

Robin Coma Delperier
Lottie by Airbnb

30 avr. 2019

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

That's why we want to share this experience.

lottie

Introduction

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 ?

how-it-works.jpg

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:

lottie.loadAnimation({
  container: document.getElementById('lottie-element'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'https://res.cloudinary.com/placeme/raw/upload/v1556665648/lottie/profiles.json'
});

Enjoy the result: lottie

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

Documentation

Community files

You can find community files here and submit yours : https://lottiefiles.com

Layer edition online

The layer edition allow you to update colors off existing animations : https://editor.lottiefiles.com

lottie-seacrh.png

Demonstration with the loading animation founded here. Colors could be updated online before download the JSON animation file on https://editor.lottiefiles.com.

lottie-edit.png

An example with the PlaceMe theme loading bar:

Before After
lottie lottie