Integrare Animazioni Lottie nei Tuoi Progetti Web
Una guida pratica per aggiungere file Lottie JSON ai tuoi siti web usando HTML, CSS e JavaScript.
Leggi l’articoloCome Esportare File Lottie Correttamente da After Effects
Impara i passaggi essenziali per convertire le tue animazioni After Effects nel formato JSON di Lottie, con configurazioni ottimali e soluzioni ai problemi comuni.
12 min
Intermedio
Luglio 2026
Perché Esportare in Formato Lottie?
Se lavori con animazioni web, avrai notato che Lottie è diventato lo standard di fatto. Non è una coincidenza. Il formato JSON è leggero, scalabile e funziona su qualsiasi dispositivo senza perdita di qualità. Le animazioni Lottie si ridimensionano perfettamente, caricano velocemente e occupano meno spazio rispetto ai video tradizionali.
After Effects è lo strumento ideale per creare queste animazioni. Il problema? Esportare correttamente richiede i passaggi giusti. Farlo male significa animazioni che tremolano, colori errati o file enormi. Qui scoprirai esattamente come evitare questi problemi.
Quello che imparerai
- Installare e configurare correttamente il plugin Bodymovin
- Preparare la composizione in After Effects per l’esportazione
- Impostare i parametri ottimali per il file JSON
- Risolvere i problemi comuni durante l’esportazione
Step 1: Installare Bodymovin (Il Plugin Essenziale)
Bodymovin è l’estensione che trasforma le tue composizioni After Effects in file JSON di Lottie. Senza di essa, l’esportazione non è possibile. La buona notizia? È gratuito e l’installazione richiede solo pochi minuti.
1
Scarica Bodymovin
Vai su aescripts.com e cerca “Bodymovin”. Scarica la versione più recente (attualmente la v6.0 o superiore è consigliata).
2
Estrai il file ZIP
Decompatta l’archivio in una cartella temporanea. Troverai una cartella denominata “bodymovin”.
3
Copia nella cartella Scripts
Su Windows: Programmi > Adobe > Common > Media Core > Plug-ins. Su Mac: Applications > Adobe > Common > Media Core > Plug-ins. Incolla la cartella bodymovin qui.
4
Riavvia After Effects
Chiudi completamente After Effects e riaprilo. Il plugin dovrebbe essere ora disponibile nel menu File > Script.
Step 2: Preparare la Composizione in After Effects
Prima di esportare, la tua composizione deve essere perfetta. Un’animazione disorganizzata crea un file JSON confuso e difficile da gestire. Dedica 10 minuti a sistemare il progetto. Vale davvero la pena.
Assicurati che tutti i layer abbiano nomi chiari e descrittivi. Non lasciare “Layer 1”, “Layer 2” — usa nomi come “button-hover”, “text-fade”, “background-move”. Questo rende il file JSON leggibile quando lo integrerai nel tuo codice.
Checklist di Preparazione
Letture Correlate
Scopri di più su come lavorare con le animazioni Lottie
Ottimizzazione delle Animazioni Web per Performance
Scopri come ottimizzare le tue animazioni Lottie per velocità e prestazioni senza compromessi sulla qualità.
Leggi l’articolo
Gestione Libreria Lottie: Organizzazione e Riutilizzo
Crea una libreria di animazioni Lottie riutilizzabile per i tuoi progetti e mantienila organizzata nel tempo.
Leggi l’articolo
AnimaPerugia Editorial Team
Team Editoriale
Scritto dal team editoriale di AnimaPerugia, focalizzato su guide pratiche e verificate per l’esportazione Lottie e le animazioni web.
Step 3: Esportare Utilizzando Bodymovin
Ora veniamo alla parte importante. Apri la tua composizione in After Effects e assicurati di avere selezionata la composizione che desideri esportare.
Vai su File > Script > Bodymovin. Si aprirà una finestra che potrebbe sembrare confusa al primo sguardo, ma non preoccuparti. Ti guideremo attraverso ogni opzione importante.
Destination
Seleziona la cartella in cui salvare il file JSON. Crea una cartella dedicata per le tue animazioni Lottie nel tuo progetto.
Composition Name
Il nome del file JSON. Usa nomi chiari come “button-animation.json” anziché “comp1.json”.
Export Settings
Deseleziona “Glyphs” se non usi font personalizzati. Seleziona “Include Expressions” solo se usi espressioni After Effects.
File Size Optimization
Seleziona “Hide Hidden Objects” per rimuovere i layer invisibili dal file JSON e ridurre le dimensioni.
Nota Informativa
Questa guida è fornita a scopo educativo e informativo. I passaggi descritti riflettono le procedure standard per l’esportazione di animazioni Lottie da After Effects al momento della pubblicazione (luglio 2026). Le versioni software e i processi potrebbero variare. Ti consigliamo di consultare la documentazione ufficiale di Adobe After Effects e del progetto Lottie per gli aggiornamenti più recenti. Le circostanze specifiche del tuo progetto potrebbero richiedere configurazioni diverse da quelle descritte.
Conclusione: Sei Pronto per Esportare
Esportare file Lottie da After Effects non è complicato quando conosci i passaggi giusti. Installa Bodymovin, prepara la tua composizione, configura le opzioni di esportazione e sei fatto. Il file JSON risultante è pronto per essere integrato nei tuoi progetti web.
La cosa bella? Una volta che hai il tuo file Lottie, puoi utilizzarlo su qualsiasi piattaforma — siti web, app mobili, e-mail interattive. È scalabile, leggero e non perde qualità indipendentemente dalle dimensioni.
Se incontri problemi durante l’esportazione — colori distorti, animazioni saltate, file troppo grandi — non arrenderti. La maggior parte dei problemi ha soluzioni semplici. Prova a ricontrollare i nomi dei layer, a semplificare gli effetti e a verificare che la composizione non contenga effetti incompatibili con Lottie.
Prossimo Passo: Integrazione Web
Hai il tuo file Lottie? Scopri come integrarlo nel tuo sito web con HTML e JavaScript.
Impara l’Integrazione