Lottie : fonctionnement, avantages et limites des animations d’Airbnb

Lottie est une bibliothèque open source créée par Airbnb qui lit des animations exportées d’After Effects au format JSON et les affiche nativement sur Android, iOS, le web et Windows. Au lieu de recoder chaque mouvement à la main ou d’intégrer un GIF lourd et flou, le développeur dépose un simple fichier dans le projet. C’est un vrai gain pour les icônes animées, les écrans d’accueil ou les micro-interactions ; en revanche, tous les effets d’After Effects ne sont pas pris en charge et Lottie n’est pas fait pour les transitions entre écrans ni les effets de particules.

On explique d’où vient Lottie, comment il fonctionne, ce qu’il fait bien et ce qu’il ne sait pas faire, les outils pour créer une animation, comment l’intégrer sur un site et les précautions à prendre (performance, accessibilité, sécurité). L’objectif : savoir si Lottie est la bonne réponse à votre besoin d’animation.

• Qu’est-ce que Lottie ?
• D’où vient Lottie ?
• Comment fonctionne une animation Lottie ?
• Quels sont les avantages de Lottie ?
• Quelles sont les limites de Lottie ?
• Avec quels outils créer une animation Lottie ?
• Comment intégrer une animation Lottie sur un site ?
• Quelles précautions prendre ?
• Lottie, GIF, vidéo ou CSS : que choisir ?
• Questions fréquentes
• Sources

Qu’est-ce que Lottie ?

Lottie désigne à la fois une famille de bibliothèques de lecture (Android, iOS, web, Windows, avec des portages pour React Native, Qt et d’autres) et, par extension, le format de fichier qu’elles lisent. Selon sa documentation officielle, Lottie analyse des animations Adobe After Effects exportées en JSON avec le plugin Bodymovin et les affiche nativement sur mobile et sur le web.

« Nativement » est le mot important : l’animation n’est pas une vidéo ni une suite d’images, mais une description vectorielle (formes, couleurs, positions, courbes d’animation) que la bibliothèque redessine en temps réel. Résultat : une animation nette à toutes les tailles, que le code peut piloter (lecture, pause, vitesse, portion à jouer).

D’où vient Lottie ?

• 2015 : Hernan Torrisi publie Bodymovin, un plugin After Effects qui exporte les animations en JSON, accompagné d’un lecteur web.
• 2017 : des ingénieurs d’Airbnb (Brandon Withrow, Gabriel Peal et Leland Richardson) s’appuient sur Bodymovin pour créer les premières bibliothèques Lottie multiplateformes et les publient en open source.
• 2020 : apparition du format dotLottie (.lottie), qui emballe une ou plusieurs animations et leurs ressources dans un seul fichier compressé.
• 2024 : création de la Lottie Animation Community, projet à but non lucratif hébergé par la Linux Foundation, chargé de faire de Lottie un format ouvert standardisé. La version 1.0 de la spécification est publiée en septembre 2024, suivie d’une version 1.0.1 en juin 2025.

Lottie n’est donc plus seulement « l’outil d’Airbnb » : c’est devenu un format d’animation vectorielle largement adopté, avec un écosystème d’éditeurs et de lecteurs.

Comment fonctionne une animation Lottie ?

1. Le designer anime dans After Effects (ou dans un éditeur compatible), en privilégiant les calques de forme vectoriels.
2. Il exporte la composition avec Bodymovin ou un plugin équivalent : on obtient un fichier .json (ou .lottie).
3. Le développeur intègre ce fichier et la bibliothèque Lottie de la plateforme visée.
4. La bibliothèque lit le JSON et redessine l’animation image par image, en SVG, en Canvas ou via les moteurs graphiques natifs d’iOS et d’Android.

Le JSON contient tout : durée, images par seconde, calques, formes, couleurs, trajectoires, courbes d’accélération. Pas besoin d’ouvrir After Effects pour connaître une valeur, et pas de réinterprétation approximative par le développeur.

Quels sont les avantages de Lottie ?

• Un passage de relais fluide entre design et développement. C’était la promesse d’origine : le designer livre l’animation telle qu’il l’a conçue, sans qu’un développeur la recrée laborieusement à la main.
• Des animations vectorielles nettes sur tous les écrans, du mobile à l’écran 4K, là où un GIF se pixellise.
• Un pilotage par le code : lancer l’animation au clic, la mettre en pause, jouer seulement un segment, la lier au défilement de la page. Les bibliothèques permettent aussi de modifier certaines propriétés à la volée (une couleur par exemple).
• Un seul fichier pour toutes les plateformes : la même animation sert sur le site, l’application iOS et l’application Android.
• Des fichiers souvent légers pour des animations simples, à condition de respecter les bonnes pratiques de construction.

C’est ce qui en fait un outil de choix pour les micro-interactions (bouton « j’aime », validation d’un formulaire, chargement), les illustrations animées d’un parcours d’accueil ou un logo animé intégré à un site ou une application.

Quelles sont les limites de Lottie ?

Tous les effets d’After Effects ne passent pas

La documentation officielle publie un tableau des fonctionnalités prises en charge par plateforme. Quelques exemples à connaître avant de commencer :

• les expressions After Effects fonctionnent sur le web mais pas sur Android, iOS ni Windows ;
• la plupart des effets de calque (teinte, remplissage, tritone) ne sont pris en charge que sur le web ; le flou gaussien et les ombres portées ont un support partiel ;
• les caches de luminance (luma matte) ne sont pas pris en charge sur mobile ;
• la fusion de tracés (merge paths) n’est prise en charge que sur Android et Windows ;
• les illustrations Illustrator, EPS, SVG ou PDF doivent être converties en calques de forme dans After Effects, sinon elles ne fonctionnent pas.

Conséquence pratique : une animation doit être pensée pour Lottie dès le départ et testée sur chaque plateforme cible, pas exportée « telle quelle » depuis un projet vidéo.

Des animations dans un écran, pas entre les écrans

Lottie anime une zone de l’interface : une illustration, une icône, un élément décoratif. Les transitions entre deux écrans d’une application (glissement, zoom, éléments partagés) relèvent du code de navigation de l’application, pas d’un fichier Lottie. Les illustrations animées comme celles-ci sont typiquement le terrain de Lottie :

Pas de particules ni d’effets de lumière complexes

Les systèmes de particules, effets de lumière et rendus produits par des plugins tiers d’After Effects ne sont pas traduisibles en formes vectorielles. Une animation comme celle-ci se réalise plutôt en vidéo ou avec du code spécifique :

Une animation mal construite peut peser lourd

La documentation Lottie met en garde : les images clés de tracés sont ce qui prend le plus de place, car chaque sommet est enregistré à chaque image clé. Les techniques qui créent une image clé à chaque image (autotrace, « wiggle ») peuvent faire grossir le fichier et dégrader les performances. Les images matricielles intégrées alourdissent aussi le JSON. Réutiliser les calques par parentage plutôt que dupliquer les images clés garde le fichier compact.

Avec quels outils créer une animation Lottie ?

• After Effects et Bodymovin : la voie historique et la plus complète. Bodymovin s’installe comme une extension et exporte chaque composition en JSON, avec des options (conversion du texte en formes, export d’une page de démonstration, lecteur intégré).
• Le plugin LottieFiles pour After Effects : il ajoute un aperçu sur mobile et un indicateur de consommation processeur, et donne accès à une bibliothèque d’animations.
• Les éditeurs en ligne dédiés, comme Lottielab, qui permettent de créer et modifier des animations Lottie sans After Effects, à partir d’éléments importés depuis les outils de design.
• Le format dotLottie pour la livraison : il regroupe animations, ressources, thèmes et états interactifs dans un fichier compressé, plus léger qu’un JSON brut.

Comment intégrer une animation Lottie sur un site ?

Sur le web, la bibliothèque officielle s’appelle lottie-web. Une fois le script chargé, un appel suffit : on indique l’élément de la page qui accueille l’animation, le moteur de rendu, la lecture en boucle et le chemin du fichier.

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

La fonction renvoie un objet qui permet ensuite de contrôler l’animation (lecture, pause, vitesse). Le moteur SVG est le plus courant ; Canvas peut être plus performant pour des animations chargées. Sur WordPress, des extensions et des blocs permettent d’insérer un fichier Lottie sans écrire de code, mais vérifiez qu’ils sont maintenus. Sur mobile, les bibliothèques lottie-android et lottie-ios s’intègrent comme n’importe quelle dépendance.

Quelles précautions prendre ?

L’accessibilité

Le critère 2.2.2 des WCAG (niveau A) impose que tout contenu en mouvement qui démarre automatiquement, dure plus de cinq secondes et s’affiche à côté d’autres contenus puisse être mis en pause, arrêté ou masqué, car le mouvement continu gêne notamment les personnes ayant des troubles de l’attention. Pensez aussi à la requête média CSS prefers-reduced-motion, qui indique que l’utilisateur a demandé à son système de réduire les animations : dans ce cas, affichez une image fixe ou une version sobre.

La sécurité des dépendances

Fin octobre 2024, des versions piégées du lecteur @lottiefiles/lottie-player ont été diffusées sur npm et donc sur les CDN qui s’appuient dessus : des sites qui chargeaient la « dernière version » ont vu apparaître une fenêtre malveillante de connexion à un portefeuille de cryptomonnaie. La leçon vaut pour toute bibliothèque : figez un numéro de version précis plutôt que « latest », et hébergez de préférence le script sur votre propre serveur.

La performance

Une ou deux animations bien construites ne posent aucun problème. Une page qui en lance dix en même temps, dont certaines hors de l’écran, sollicite inutilement le processeur, surtout sur mobile. Chargez les animations au moment où elles deviennent visibles et arrêtez celles qui ne le sont plus.

Lottie, GIF, vidéo ou CSS : que choisir ?

Format	Idéal pour	Points faibles
Lottie	Illustrations et icônes animées vectorielles, micro-interactions, animations pilotées par le code	Effets After Effects partiellement pris en charge, pas de particules ni de rendu photo
GIF	Aperçus rapides, partage sur des outils qui n’acceptent que ce format	256 couleurs, fichiers lourds, image floue en grand, pas de contrôle
Vidéo (MP4, WebM)	Motion design riche, prises de vue réelles, effets complexes	Taille fixe, pas d’interaction fine, poids élevé
CSS ou SVG animé	Transitions simples, survols, petits mouvements d’interface	Laborieux dès que l’animation se complique

En pratique, Lottie trouve sa place entre les deux extrêmes : plus riche que du CSS, plus léger et plus souple qu’une vidéo. Pour un film de marque ou une vidéo explicative, la création vidéo en motion design reste plus adaptée. Et si l’animation doit porter votre univers graphique (logo, mascotte, pictogrammes), elle gagne à s’appuyer sur une identité visuelle cohérente dès le départ. Un projet en tête ? Écrivez-nous à contact@osmova.com ou via le formulaire de contact.

Questions fréquentes

Lottie est-il gratuit ?

Oui, les bibliothèques Lottie et le plugin Bodymovin sont open source. After Effects, en revanche, est un logiciel payant d’Adobe, et certains éditeurs ou bibliothèques d’animations tiers proposent des offres payantes.

Faut-il obligatoirement After Effects ?

Non. After Effects reste l’outil le plus complet, mais des éditeurs dédiés permettent aujourd’hui de créer et modifier des animations Lottie directement, sans passer par Adobe.

Quelle différence entre un fichier .json et un fichier .lottie ?

Le .json est l’animation brute. Le .lottie (dotLottie) est une archive compressée qui peut contenir plusieurs animations, leurs images, des thèmes et des états interactifs ; il est plus léger mais demande un lecteur compatible.

Lottie est-il mauvais pour le référencement ?

Pas en soi. Une animation Lottie est décorative : le texte important doit rester du vrai texte HTML. Surveillez surtout le poids et l’impact sur la vitesse de chargement.

Lottie fonctionne-t-il avec React Native et Flutter ?

Pour React Native, oui, via le paquet lottie-react-native maintenu par la communauté. Pour les autres environnements, vérifiez qu’un lecteur maintenu existe et teste bien les fonctionnalités dont vous avez besoin.

Sources

• Airbnb : documentation officielle de Lottie
• Documentation Lottie : fonctionnalités prises en charge par plateforme
• Documentation Lottie : créer des animations dans After Effects
• lottie-web : bibliothèque et plugin Bodymovin
• Wikipédia : Lottie (file format)
• Lottie Animation Community
• Spécification du format Lottie
• dotLottie : présentation du format
• LottieFiles : signalement du code malveillant dans lottie-player (30 octobre 2024)
• W3C : comprendre le critère WCAG 2.2.2 Mettre en pause, arrêter, masquer
• MDN : prefers-reduced-motion