Compatibilità:

WebSite X5 Evo e Pro

Le animazioni sono uno strumento efficace per rendere un sito web più moderno, coinvolgente e chiaro nella comunicazione. Se usate con criterio, permettono di attirare l’attenzione dell’utente, migliorare la user experience e valorizzare sezioni specifiche delle pagine.


Per ampliare ulteriormente le possibilità di personalizzazione, WebSite X5 mette a disposizione un Oggetto Opzionale dedicato all’integrazione delle animazioni realizzate con LottieFiles, una piattaforma online che offre una vasta raccolta di animazioni leggere e ottimizzate per il web.


Grazie a questo Oggetto Opzionale puoi inserire facilmente animazioni Lottie all’interno delle pagine dei tuoi progetti, anche se non hai competenze di programmazione o di animazione. 


In questa guida vedremo:


Cosa sono le animazioni Lottie e a cosa servono

I file Lottie sono animazioni vettoriali salvate in formato JSON, un formato testuale leggero e strutturato che descrive matematicamente forme, colori, movimenti e tempi dell’animazione.

A differenza di immagini o video, un file Lottie non contiene pixel, ma istruzioni che il browser interpreta e riproduce in tempo reale.


Questo approccio comporta vantaggi concreti rispetto ai formati tradizionali, come GIF o video:

  • i file Lottie sono molto più leggeri rispetto alle GIF animate;
  • la qualità rimane sempre elevata perché le animazioni sono vettoriali;
  • non ci sono problemi di sfocatura o perdita di definizione su schermi ad alta risoluzione;
  • le animazioni vengono riprodotte in modo fluido anche su dispositivi mobili.


A titolo di confronto:

  • Una GIF è una sequenza di immagini raster che aumenta rapidamente di peso e perde qualità se ridimensionata.
  • Un video richiede più risorse, tempi di caricamento maggiori e offre meno flessibilità grafica.
  • Un file Lottie (JSON) è leggero, scalabile e ottimizzato per il web moderno.


#tip - Il formato Lottie è stato sviluppato originariamente da Airbnb per gestire animazioni complesse all’interno delle proprie applicazioni web e mobile in modo efficiente. In seguito il formato è stato reso open source, favorendone un’ampia diffusione anche in ambito web.


Le animazioni Lottie sono quindi particolarmente indicate per:

  • arricchire l’aspetto grafico delle pagine senza rallentarne il caricamento;
  • attirare l’attenzione su elementi specifici, come pulsanti o call to action;
  • fornire feedback visivi all’utente, ad esempio durante il caricamento dei contenuti o la conferma di un’azione.


Grazie a queste caratteristiche, i file Lottie rappresentano una soluzione tecnica ed efficace per rendere i siti web più moderni e dinamici, mantenendo prestazioni elevate e un’ottima esperienza di navigazione.


La piattaforma LottieFiles

Una volta compreso cosa sono i file Lottie, è naturale chiedersi dove reperirli, come crearli e come utilizzarli nei propri progetti web.

LottieFiles è una delle principali piattaforme dedicate a questo formato e offre un insieme di strumenti pensati per coprire tutte queste esigenze.


In particolare, attraverso LottieFiles è possibile:

  • Trovare animazioni Lottie pronte all’uso, grazie a una vasta libreria online che include migliaia di risorse gratuite, organizzate per categorie e stili, utilizzabili anche in progetti professionali.
  • Accedere a contenuti e risorse premium, disponibili tramite piani a pagamento, pensati per chi lavora con le animazioni in modo continuativo o necessita di soluzioni più avanzate.
  • Visualizzare, testare e personalizzare le animazioni direttamente dal browser, grazie a un editor online che consente di verificarne il risultato prima dell’utilizzo.
  • Scaricare i file in formato JSON, pronti per essere integrati all’interno dei progetti web.


Con WebSite X5 puoi iniziare subito a usare le animazioni Lottie partendo dalla libreria gratuita di LottieFiles, più che sufficiente per la maggior parte dei progetti.

Se in futuro avrai bisogno di qualcosa in più, potrai sempre valutare le funzionalità avanzate e i servizi a pagamento messi a disposizione dalla piattaforma.


Come integrare le animazioni Lottie in WebSite X5 

Per utilizzare un’animazione Lottie all’interno di un progetto WebSite X5, per prima cosa devi reperire l’animazione desiderata attraverso la piattaforma LottieFiles.


Accedendo a LottieFiles puoi:

  • effettuare una ricerca utilizzando parole chiave o categorie;
  • visualizzare l’anteprima delle animazioni disponibili;
  • scegliere l’animazione più adatta al tuo progetto;
  • scaricare il file in formato JSON corrispondente, che rappresenta il file Lottie vero e proprio.


Ora che disponi dell'animazione Lottie salvata in locale sul tuo computer, inserirla nel tuo progetto attraverso l’Oggetto Lottie Animation è molto facile: 

  • Inserisci l'Oggetto Lottie Animation nella pagina e fai doppio click in modo da accedere alla finestra con tutte le opzioni.
  • Importa l'animazione Lottie che vuoi utilizzare: nel campo File animazione clicca sul pulsante per cercare il file precedentemente scaricato in locale. Cliccando sul pulsante puoi inserire un titolo e un testo alternativo utili ai fini dell'accessibilità oltre che dell'ottimizzazione SEO della pagina (vedi Accessibilità delle immagini: l'importanza del testo alternativo).
  • A questo punto puoi definire alcune Proprietà come la Dimensione e il Colore di Sfondo dell'animazione. Se vuoi, puoi anche trasformare l'animazione Lottie in un pulsante tramite l'inserimento di un collegamento: clicca sul pulsante  e, attraverso la finestra richiamata, scegli l'azione da associare al link.
  • Per fare in modo che l'animazione non si interrompa mai, attiva l'opzione Riproduci in loop.
  • Infine, personalizza alcuni parametri relativi al comportamento dell'animazione. Nello specifico puoi intervenire su:
    • Modalità di riproduzione: per decidere il senso della riproduzione (in avanti, all'indietro, con rimbalzo, ecc.).
    • Velocità: per impostare la velocità di riproduzione (accelerandola o rallentandola).
    • Tipo di avvio: per attivare la riproduzione automatica o solo su passaggio del mouse. 
  • Quando sei soddisfatto, clicca sul pulsante Ok per confermare. 


Impaziente di usarlo nelle pagine del tuo sito? Installa subito l’Oggetto Lottie Animation


Non hai Crediti a sufficienza per acquistare questo Oggetto? Vedi tutti i pacchetti di Crediti