Come abbiamo già visto nei precedenti articoli della serie, i Lottie sono dei semplici file JSON che ci consentono di utilizzare le animazioni che descrivono su più piattaforme, tra cui ovviamente il web.

Per iniziare bisogna utilizzare il plugin javascript BodyMovin, disponibile tramite cdn:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.6/lottie.min.js"
type="text/javascript"></script>

o installare il web player tramite npm

npm install lottie-web

L’utilizzo dell’animazione è molto semplice:

var animation = bodymovin.loadAnimation(
  container: document.getElementById('lottie'), // Required
  path: 'data.json', // Required
  renderer: 'svg/canvas/html', // Required
  loop: true, // Optional
  autoplay: true, // Optional
  name: "Hello World", // Name for future reference. Optional.
}){

Possiamo personalizzare una serie di parametri ed abbiamo a disposizione vari eventi per il controllo dell’animazione, per ulteriori approfondimenti rimandiamo alla documentazione ufficiale.

Ci soffermeremo invece sulla differenza tra i renderer tra cui è possibile scegliere.

SVG
E’ un renderer completamente vettoriale. Offre una compatibilità totale con le api, maggiori prestazioni sul re-rendering degli elementi (che scatta sul resize e durante l’animazione).

CANVAS
E’ un renderer bitmap, che offre una grande compatibilità con le api a fronte di un utilizzo della memoria leggermente maggiore e di performance inferiori sul re-rendering, in quanto si è costretti a ridisegnare ogni volta interamente la scena.

HTML
E’ un renderer basato sui convenzionali tag html e css, nativo per il brower. Le performance nell’animazione risultano relativamente peggiori se comparate agli altri due ed ha vari problemi di compatibilità con molte api aggiuntive e limitazioni sul rendering di alcuni elementi.

Ricordiamo infine a chi fosse intenzionato ad iniziare ad utilizzare i lottie che molte animazioni adatte per gli elementi più comuni (pager, loader, scroll, …) sono disponibili in maniera gratuita su LottieFiles.