Lottie animation: cosa sono e come funzionano?
Scritto da Matteo il 19 Aprile 2021

Lottie animation: cosa sono e come funzionano?

Lottie è una libreria sviluppata da Airbnb nata per il Android, iOS e il Web.
Lottie è utilizzata principalmente per creare animazioni in questi ambienti. Infatti permette di creare animazioni avanzate direttamente su Adobe After Effects ed esportarle in formato JSON attraverso Bodymovin, un'estensione open-source.

1. Perchè Lottie?

Perchè usare questo formato? perchè non esportare le animazioni come Gif animate? La risposta è piuttosto semplice: il peso.
Un file Json è infinitamente più leggero, pesa meno, e come saprai il peso delle immagini, gif, video e ogni altro elemento caricato influisce sulle prestazioni di un sito web. Lottie è leggerissima.

Riprendendo il simpatico paragone direttamente dalla documentazione ufficiale di Lottie.com, se il peso di un'immagine PNG si paragona alla grandezza di un T-rex un file Lottie è un cagnolino.

Un altro pregio di Lottie è l'ottima compatibilità con le piattaforme web e mobile. Si possono addirittura usare le Lottie animation come sticker all'interno delle piattaforme di messaggistica!

Altro pregio di Lottie è la scalabilità: le immagini png, Gif o jpg hanno una risoluzione massima, e più sono nitide più pesano. Lottie invece ha le proprietà di un file vettoriale e può essere scalato senza perdere di qualità.

Ultimo punto, ma non per importanza, lottie può essere facilemente "manipolata" per rendere l'animazione interattiva.
Ad esempio possiamo avviare l'animazione solo durante una determinata azione, durante lo scroll o all'avvio dell'app.

2. Come si usa Lottie?


Il modo più semplice è quello di andare su Lottie.com/preview e caricare la tua animazione Lottie, verrà generato il codice che potrai implementare direttamente nel tuo sito web. Se sei poco pratico nel realizzare animazione personalizzate puoi trovare tantissime animazioni gratuite e a pagamento direttamente sul sito Lottie.com.

https://lottiefiles.com/61235-hiro-meditation
Animazione gratuita presa da Lottie.com
https://lottiefiles.com/55356-chris-gannon

Le animazioni disponibili gratuitamente su Lottie.com sono di diversa natura e stile. Inoltre possono essere facilmente modificate direttamente nell'editor presente nel sito web.

3. Il meglio con After Effects

Le vere potenzialità di Lottie sono solo all'inizio. Se sei capace di creare le tue animazione personalizzate, ad esempio utilizzando After Effects potrai facilmente convertirle in file Lottie, ottimizzandone il peso e la compatibilità web!.

In questo articolo non parleremo di come creare animazioni su After Effects, ma se siete curiosi vi lasciamo qualche video tutorial che abbiamo trovato esemplificativo.

4. Da After Effects a Lottie

Come si converte un file di After Effects in un file Json Lottie?
In nostro soccorso arriva Bodymovin.

4.1Cos'è Bodymovin?

Bodymovin è un'estensione gratuita per After Effects che permette di esportare un file come JSON.

Potete trovare un tutorial a questo indirizzo oppure seguire i passi del video qui sotto.

5. Conclusioni

La combinazione After Effects, Bodymovin e Lottie ha un infito potenziale e siamo convinti sia il futuro delle animazioni sul Web. Il peso ridotto e la totale personalizzazione grafica rendono questo insieme di Tool un must have.

Ti lasciamo con i siti web che abbiamo apprezzato di più e che utilizzano le potenzialità di Lottie.
Speriamo ti siano di ispirazione!

https://areyallgreen.com/

https://www.orizon.co/

https://www.rudlundschwarm.at/

Scritto da Matteo
UX/UI designer.

2 comments on “Lottie animation: cosa sono e come funzionano?”

  1. Ciao.
    Una domanda: se ho un video all'interno dell'animazione after effects posso esportare json Bodymovin e Lottie? Perchè ho provato ad esportare e se metto il json nella preview lottie si vede solo la grafica ma non il video sottostante. Potete aiutarmi a capire se è possibile esportare un html5 che contenga un video da after effects.

    Grazie

    1. Ciao, non è una pratica consigliata. I video generalmente pesano molto di conseguenza è meglio evitarli per evitare cali di performance importanti. L'idea delle lottie animation come spiegato nell'articolo è quella di avere animazioni leggere e responsive, per questo solitamente si utilizzano formati vettoriali e non immagini. Non ci è chiaro come vorresti usare il video in questo caso. Se devi semplicemente "embeddare" un mp4 puoi farlo in diversi modi più efficienti.
      Se invece ti serve animare/manipolare gli elementi ti consiglio di approfondire https://greensock.com/gsap/.

      Speriamo di esserti stati utili 🙂

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *