Blog

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.

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 ?

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:

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:

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 Search

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

Lottie Search

An example with the PlaceMe theme loading bar:

Before After

Others examples

Robin Coma Delperier

Consultant Frontend

robin@placeme.io

0624777688

Logo PlaceMe

Accompagne vos projets digitaux

Frontend Backend Cloud DevOps

www.placeme.io

27 rue des blanchers

31000 Toulouse

contact@placeme.io