Animazioni Lottie: cosa sono, come funzionano e dove vengono usate

Un'animazione Lottie è un file di testo. Non contiene fotogrammi né pixel, ma la descrizione di forme, livelli e keyframe che un player legge e disegna al momento, in una pagina web come in un'app iOS, Android o Windows. Per questo la stessa animazione si può ingrandire senza perdere definizione, cambiare colore via codice o fermare su un fotogramma preciso quando l'utente compie un'azione.

Il formato è nato da un plugin per Adobe After Effects ed è diventato il modo più diffuso per portare animazioni vettoriali dal software di motion design al prodotto. Dal 2024 ha anche una specifica ufficiale.

Da Bodymovin a standard aperto

Nel 2015 Hernan Torrisi ha pubblicato Bodymovin, un'estensione per After Effects che sfrutta lo scripting del programma per leggere un progetto ed esportarne la descrizione in JSON, insieme al primo player JavaScript per browser. Nel 2017 un gruppo di ingegneri di Airbnb ha sviluppato le librerie per iOS e Android capaci di riprodurre quegli stessi file e le ha chiamate Lottie.

Negli anni successivi sono arrivati altri player: Microsoft ha rilasciato Lottie-Windows nel 2018, Qt e Samsung, con la libreria rLottie, hanno aggiunto il supporto nel 2019. Con tanti renderer diversi, la stessa animazione poteva comportarsi in modo differente da una piattaforma all'altra.

Per risolvere il problema nel 2024 è nata la Lottie Animation Community, un progetto ospitato dalla Linux Foundation a cui partecipano tra gli altri Google, LottieFiles, Airbnb e lo stesso Torrisi. Il 17 settembre 2024 ha pubblicato la versione 1.0 della specifica del formato JSON, che include soltanto le funzioni già supportate in modo ampio dai player. Lottie ha ora anche un MIME type registrato presso IANA, video/lottie+json, e un'estensione ufficiale, .lot.

Come si crea un file Lottie

La strada originale resta After Effects con Bodymovin, oggi affiancato dal plugin di LottieFiles. Dal pannello dell'estensione si sceglie la composizione, si indica la cartella di destinazione e si avvia il render: il risultato è un file JSON, accompagnato da una cartella di immagini se l'animazione contiene livelli raster.

Non tutto quello che After Effects permette di fare arriva nel JSON. Secondo la documentazione di lottie-web, l'esportazione supporta precomposizioni, livelli forma, solidi, immagini, oggetti nulli, testi, maschere e time remapping, mentre sequenze di immagini, video e audio restano esclusi. Le espressioni sono supportate solo in parte. Per lo stesso motivo la documentazione consiglia di convertire in forme i livelli vettoriali importati da Illustrator, che altrimenti vengono esportati come immagini.

In produzione questo significa rinunciare a una parte degli strumenti. Il team di Boost, un'app di pagamenti malese, racconta di aver abbandonato lo strumento Puppet, il motion blur e Particle World proprio perché Lottie non li supporta.

After Effects non è più l'unica strada. LottieFiles ha lanciato nel 2024 Lottie Creator, un editor che funziona nel browser e non richiede software aggiuntivo. Figma Motion, ancora in open beta, esporta direttamente in Lottie e dotLottie, e la pagina di aiuto di Figma indica cosa non sopravvive al passaggio: shader, video e gradienti angolari non sono supportati, mentre ombre, rumore ed effetti vetro restano fermi all'aspetto del primo fotogramma.

Perché usare Lottie al posto di GIF e video

Il vantaggio più citato è il peso. Una GIF o un video salvano ogni fotogramma come immagine; un file Lottie descrive forme e movimenti e lascia al player il calcolo dei passaggi intermedi. Telegram, quando nel 2019 ha introdotto gli sticker animati basati su Lottie, ha dichiarato un peso di 20-30 KB per sticker, circa sei volte meno di una foto media. Il confronto va però fatto caso per caso: un'animazione piena di immagini raster o di tracciati complessi può pesare più del previsto.

Gli altri vantaggi derivano dalla natura vettoriale e testuale del formato:

• l'animazione si adatta a qualsiasi dimensione e densità di schermo senza perdere definizione;
• la trasparenza è nativa, senza i bordi sporchi tipici delle GIF;
• la riproduzione si controlla via codice: si può avviare, fermare, invertire, cambiare velocità o limitare a un segmento di fotogrammi;
• colori e altre proprietà possono essere modificati a runtime, senza riesportare il file.

C'è anche un costo, e la documentazione di lottie-web lo dichiara: il rendering avviene in tempo reale. Forme enormi usate per mascherarne una piccola porzione o un numero eccessivo di nodi peggiorano le prestazioni. Figma ripete lo stesso avvertimento per le animazioni complesse o ricche di contenuti multimediali. In pratica una GIF pesa di più in download, mentre un Lottie complesso può pesare di più sul processore del dispositivo, ed è lì che va misurato.

Lottie JSON o dotLottie

Accanto al JSON classico esiste dotLottie, con estensione .lottie: un archivio ZIP che raccoglie una o più animazioni con le relative risorse. Nella versione attuale il pacchetto può contenere anche temi e state machine, cioè la logica che stabilisce come l'animazione risponde a clic, hover e altri input. È un formato open source sviluppato da LottieFiles, distinto dallo standard della Lottie Animation Community, e non tutti i player lo leggono.

La scelta è pratica. Il JSON funziona con qualsiasi player ed è facile da ispezionare. dotLottie conviene quando il player è compatibile e servono più animazioni in un solo file, risorse incorporate, temi o interattività definita nel file stesso.

Come inserire un'animazione Lottie in una pagina web

Con lottie-web

lottie-web è la libreria originale, nel repository di Airbnb. Si installa da npm e si avvia con loadAnimation, indicando il contenitore, il renderer (svg, canvas o html) e il percorso del file JSON:

npm install lottie-web

import lottie from 'lottie-web';

const animazione = lottie.loadAnimation({
  container: document.getElementById('hero-animation'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '/animations/hero.json'
});

L'oggetto restituito espone i metodi di controllo, tra cui play, pause, stop, setSpeed, setDirection, goToAndStop e playSegments, che riproduce solo un intervallo di fotogrammi. Eventi come complete e loopComplete permettono di agganciare altre azioni alla fine dell'animazione. Con il renderer svg l'animazione diventa un insieme di elementi nel DOM, raggiungibili anche dal CSS; con canvas viene disegnata su un unico elemento.

Con dotlottie-web

dotlottie-web è il player di LottieFiles. Legge sia i file .json sia i .lottie, ha un motore in Rust compilato in WebAssembly basato sul renderer ThorVG e disegna su un elemento canvas, con backend software, WebGL2 e, in via sperimentale, WebGPU:

<canvas id="canvas" style="width: 300px; height: 300px"></canvas>

import { DotLottie } from '@lottiefiles/dotlottie-web';

const dotLottie = new DotLottie({
  canvas: document.getElementById('canvas'),
  src: '/animations/hero.lottie',
  autoplay: true,
  loop: true,
});

Per le pagine con molte animazioni esiste DotLottieWorker, con la stessa API ma con il rendering spostato in un Web Worker su OffscreenCanvas, così il thread principale resta libero per layout e scroll. Ci sono poi componenti ufficiali per React, Vue, Svelte e Solid e un web component utilizzabile in qualsiasi pagina:

import '@lottiefiles/dotlottie-wc';

<dotlottie-wc src="/animations/hero.lottie" autoplay loop></dotlottie-wc>

Senza scrivere codice

Webflow ha un elemento Lottie nativo che accetta anche file dotLottie e si collega alle interazioni, con trigger come il caricamento della pagina, lo scroll o il movimento del mouse. Un dettaglio da ricordare: per impostazione predefinita l'animazione parte al caricamento della pagina, quindi se si trova sotto la piega il visitatore rischia di non vederla, a meno di usare il loop o un'interazione di scroll. Per WordPress, Framer, Wix, Canva e altri strumenti LottieFiles mantiene plugin e integrazioni.

Fissare la versione del player

Il 30 ottobre 2024 sono state pubblicate su npm tre versioni non autorizzate del pacchetto @lottiefiles/lottie-player, la 2.0.5, la 2.0.6 e la 2.0.7, con codice che mostrava ai visitatori dei siti una richiesta di collegare il proprio wallet di criptovalute. Gli attaccanti avevano usato un token di pubblicazione compromesso. LottieFiles ha rilasciato la versione corretta 2.0.8 e ha precisato che il player dotLottie e i suoi servizi non erano coinvolti. Tra le segnalazioni comparse su GitHub c'erano anche pagine che caricavano il player da CDN con il riferimento @latest, e che quindi hanno ricevuto il codice malevolo senza alcun intervento.

La lezione vale per qualsiasi libreria caricata da terzi: indicare una versione precisa, oppure installare il pacchetto e servirlo dal proprio dominio.

Accessibilità: rispettare la riduzione del movimento

Molte persone attivano nel sistema operativo l'opzione che riduce le animazioni, per esempio perché il movimento sullo schermo provoca loro nausea o difficoltà di concentrazione. Sul web lottie-web non applica da solo questa preferenza, quindi va letta con la media query prefers-reduced-motion e gestita nel codice che incorpora l'animazione. Un approccio semplice è mostrare l'ultimo fotogramma come immagine statica:

const riduciMovimento = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const animazione = lottie.loadAnimation({
  container: document.getElementById('hero-animation'),
  renderer: 'svg',
  loop: !riduciMovimento,
  autoplay: !riduciMovimento,
  path: '/animations/hero.json'
});

if (riduciMovimento) {
  animazione.addEventListener('DOMLoaded', () => {
    animazione.goToAndStop(animazione.totalFrames - 1, true);
  });
}

Su iOS la situazione è diversa: dalla versione 4.3.0 lottie-ios riconosce un marker chiamato "reduced motion" e, se l'utente ha attivato la riduzione del movimento, riproduce quel marker al posto dell'animazione completa. La proposta di portare lo stesso comportamento nella specifica è ancora in discussione, e Android e web non lo supportano. Per lo screen reader, lottie-web accetta nelle impostazioni del renderer svg un titolo e una descrizione; un'animazione puramente decorativa, invece, va nascosta alle tecnologie assistive.

Dove viene usato Lottie

Gli esempi più utili per capire il formato non sono i siti vetrina, ma i prodotti in cui Lottie fa parte dell'infrastruttura.

Piattaforme e sistemi

Telegram. Gli sticker animati, introdotti a luglio 2019, sono animazioni Lottie salvate in un formato dedicato, .tgs: un JSON Bodymovin compresso con gzip e riprodotto con la libreria rlottie. È probabilmente il caso d'uso di Lottie più visto al mondo da persone che non sanno di guardarlo.

Windows. Lottie-Windows riproduce animazioni Lottie nelle app per Windows 10 e 11 attraverso le API Windows.UI.Composition e il controllo AnimatedVisualPlayer. In WinUI anche le icone animate del controllo AnimatedIcon partono da file Lottie, con i marker del file usati per definire gli stati dell'icona.

Google. Skottie è l'implementazione di Lottie dentro Skia, il motore grafico 2D usato in molti prodotti Google, e funziona ovunque giri Skia, Android e iOS compresi.

App e brand

Gli esempi che seguono vengono dai case study pubblicati da LottieFiles, quindi da una fonte interessata alla diffusione del formato: i numeri sono quelli dichiarati dalle aziende.

Walmart. Sparky, l'assistente AI per lo shopping integrato nell'app, è animato con una libreria di oltre 60 animazioni Lottie che coprono 12 gamme emotive e i diversi stati della conversazione. Il progetto è stato realizzato da JKR con lo studio Animade, e gli sviluppatori usano gli stessi file anche per attivare piccoli easter egg stagionali.

Duolingo. Il team usa Lottie nell'app e sul web e indica come motivo principale la possibilità di mantenere file leggeri e prestazioni affidabili su una grande varietà di dispositivi e sistemi operativi.

DisneyNOW. Nell'app per bambini le ricompense vengono mostrate con animazioni Lottie al posto di un semplice overlay statico.

Troo. Un'app che insegna ai bambini empatia e competenze sociali attraverso storie animate: sostituendo video e animazioni raster con file Lottie, la dimensione dell'app è passata da 160 a 53 MB.

Quando conviene un'altra soluzione

Lottie funziona bene per icone animate, illustrazioni di onboarding, indicatori di caricamento, stati di conferma ed errore: animazioni vettoriali contenute, progettate da un motion designer e riprodotte senza riscriverle nel codice.

Per contenuti video o fotografici serve un video: Bodymovin non li esporta e Figma li esclude dall'export Lottie. Se l'obiettivo è incorporare un MP4, l'elemento video di HTML resta la strada più diretta. Per le transizioni di interfaccia, come l'apertura di un menu o il feedback di un pulsante, il CSS è in genere più adatto, perché lavora sugli elementi del DOM, si aggancia ai token del design system e rispetta prefers-reduced-motion con una media query. Quando invece si vogliono animare elementi della pagina in sequenze complesse, una libreria come GSAP lavora direttamente sul DOM invece di riprodurre un file.

Per tutto il resto vale la regola che la stessa documentazione di Figma suggerisce: provare l'animazione nel player che verrà usato in produzione, e misurarne peso e fluidità sui dispositivi più modesti del pubblico a cui è destinata.

Fonti

1. The Linux Foundation, “Lottie Animation Community announces Lottie v1.0 specification”, 17 settembre 2024
2. Phoronix, “Linux Foundation Gets Involved With Lottie To Develop Formal File Format Specification”, 2024 (giorno non verificato)
3. LottieFiles, “What is a Lottie animation?” (storia del formato)
4. LottieFiles Blog, “Lottie Gains Official Recognition with IANA Assignment”
5. LottieFiles Docs, “File Format”
6. Airbnb, lottie-web, “README del repository”
7. LottieFiles, dotlottie-web, “README del repository”
8. Figma Help Center, “Export animations from Figma”
9. Webflow, “dotLottie animation file support”
10. Webflow Help Center, “Embed Lottie animations”
11. Ravie Lakshmanan, The Hacker News, “LottieFiles Issues Warning About Compromised lottie-player npm Package”, 31 ottobre 2024
12. GitHub, LottieFiles/lottie-player, “issue #254 "Malicious code in Lottie-Player CDN files"”, 30 ottobre 2024
13. Airbnb, lottie-ios, “Lottie 4.3.0 now available, with official support for SwiftUI” (discussione #2189)
14. Lottie Animation Community, lottie-spec, “issue #7 "Prefers reduced motion fallback"”
15. Telegram, “Animated Stickers Done Right”, luglio 2019
16. Telegram, documentazione API, “Stickers and masks”
17. Microsoft Learn, “Lottie - Windows Community Toolkit”
18. Microsoft Learn, “Animated icon”
19. Skia, “Skottie - Lottie Animation Player”
20. LottieFiles, “case study Walmart”
21. LottieFiles, “case study Duolingo”
22. LottieFiles, “case study DisneyNOW”
23. LottieFiles, “case study Troo”
24. LottieFiles, “case study Boost”