Lottie est un format ouvert pour les animations graphiques vectorielles

 (lottie.github.io)
2 points par GN⁺ 2025-05-26 | 1 commentaires | Partager sur WhatsApp
  • Lottie est un format de fichier ouvert pour les animations graphiques vectorielles, qui permet de lire facilement sur le web et sur mobile des animations créées avec Adobe After Effects
  • Les animations sont enregistrées au format JSON, qui contient tous les éléments de l’animation, notamment les images clés, les courbes d’easing et les informations de calques
  • Ce format est un standard ouvert offrant extensibilité, indépendance vis-à-vis de la résolution et diverses implémentations de rendu, et de nombreuses entreprises l’utilisent pour améliorer l’expérience utilisateur
  • La Lottie Animation Community (LAC) est un projet open source à but non lucratif sous l’égide de la Linux Foundation, dont l’objectif est de faire évoluer ce format vers un standard de l’industrie
  • Spécifications, outils de validation, implémentations et feuille de route sont développés et publiés par la communauté, dans une structure transparente et collaborative ouverte à tous

Qu’est-ce que Lottie ?

Aperçu

  • Lottie est un format open source d’animation vectorielle développé en 2015 par Hernan Torrisi
  • Les animations créées dans After Effects peuvent être exportées en fichiers JSON Lottie puis lues sur différentes plateformes
  • Aujourd’hui, il s’agit d’un format standard largement utilisé sur de nombreuses plateformes, notamment le web, le mobile et la TV

Caractéristiques

  • Basé sur les graphiques vectoriels
    • Composé de formes géométriques (lignes, courbes, etc.) plutôt que de pixels, il permet une image nette quelle que soit la résolution
  • Tweening
    • Méthode consistant à interpoler automatiquement les changements entre les images clés définies par l’animateur
    • Permet de produire des animations fluides sans devoir créer manuellement des mouvements complexes
  • Format basé sur JSON
    • Représenté en JSON, il est facile à transmettre sur le web, à éditer avec des outils existants ou à traiter de façon automatisée
    • En tant que standard ouvert, chacun peut créer une implémentation et il offre une excellente interopérabilité
  • Écosystème mature
    • Un écosystème bien établi existe autour des lecteurs, assets, outils de création et bibliothèques
    • Il est utilisé par de très nombreuses entreprises comme Airbnb ou Google, et pris en charge par divers outils et frameworks

Lottie Animation Community (LAC)

  • Une communauté à but non lucratif créée sous l’égide de la Linux Foundation pour standardiser et diffuser Lottie
  • Son objectif est d’établir le format de fichier Lottie comme standard d’animation cross-platform
  • Elle fonctionne sous la gouvernance de la Joint Development Foundation et vise une collaboration ouverte
  • Elle fournit les bases de l’écosystème au moyen de documents de spécification clairs, d’outils de validation (Validator), d’une liste d’implémentations et d’une feuille de route
  • Sa structure permet à chacun de participer et de contribuer, en mettant l’accent sur la transparence et un développement piloté par la communauté

À lire aussi

1 commentaires

 
GN⁺ 2025-05-26
Avis sur Hacker News

  • Chaque fois que j’utilise Lottie, j’en ressors frustré : l’idée est vraiment excellente, et le fait de pouvoir extraire directement des animations depuis les outils que les animateurs utilisent déjà est séduisant, mais la manière dont c’est implémenté est très décevante. Dans ce domaine, un format binaire bien plus compact serait beaucoup plus adapté, mais on stocke à la place des blocs de données numériques en JSON. En plus, comme le JSON peut référencer des fichiers externes, on se retrouve en pratique soit avec plusieurs fichiers dans un dossier, soit avec des fichiers inline en base64 dans le JSON, soit avec un fichier unique compressé. Sur le web, cela signifie charger un SDK énorme, et ces animations doivent soit charger plusieurs fichiers séparément, soit traiter un même fichier plusieurs fois avec différents parseurs (JSON, base64, png, lottie, zip, etc.). Si on utilise des fichiers .lottie, il faut même embarquer un décompresseur zip dans le bundle JS, et le lecteur .lottie séparé inclut un blob wasm de 2 Mo, sans que je comprenne vraiment pourquoi. Dans notre app, cela nous a causé énormément de difficultés pour réduire la taille de l’application, et heureusement nous ne l’utilisions pas sur le chemin critique, donc on s’en est arrêté là. Il a fallu énormément de bricolage : optimiser les animations, corriger à la main les problèmes de chemins et d’inline, gérer des bugs où des vecteurs devenaient des png, etc. En plus, les navigateurs tiennent mal la charge quand plusieurs animations sont lues en même temps, surtout sur les appareils peu puissants, et l’animation côté JS et DOM était moins efficace que je ne l’imaginais. Si j’ai un peu de temps pour un projet de week-end, j’aimerais expérimenter une conversion en sprites SVG optimisés et les lire avec des transitions CSS pour voir si cela s’en sortirait mieux

    • Je compatis totalement, et le workflow d’export d’After Effects vers Lottie était particulièrement horrible. Beaucoup de calques et de styles ne fonctionnaient pas correctement à l’export, donc il fallait expliquer un par un aux motion designers quelles fonctionnalités ils pouvaient utiliser et lesquelles ils devaient éviter, et ce n’est pas un aspect que les designers apprécient. En réalité, faire un simple rendu vidéo et le lire selon les interactions était souvent bien plus léger et demandait moins de travail. J’ai aussi entendu parler de Rive, qui semble justement chercher à corriger les problèmes de Lottie. Cela dit, je ne l’ai pas encore utilisé moi-même, donc le résultat peut varier selon les cas

    • Dans une entreprise où j’ai travaillé auparavant, le bundle de la web app faisait 8 Mo (environ 2 Mo compressé), et en regardant de plus près, l’essentiel venait de la bibliothèque Lottie (2 Mo) et de seulement quatre animations. Nous avons supprimé deux de ces animations, puis traité les autres avec du lazy loading en même temps que Lottie. Malgré ça, je n’ai pas réussi à convaincre les designers ou les autres développeurs à quel point un bundle de 8 Mo était problématique, donc j’ai finalement eu l’impression de perdre cette bataille

    • Je suis d’accord sur le fait que les navigateurs tiennent mal quand plusieurs animations Lottie sont lues en même temps. Même au début des années 2000, il y avait beaucoup de pages web remplies de pubs animées en Flash ; il y avait bien des problèmes de performances, mais cela tournait quand même sur les CPU monocœur de l’époque

    • À l’inverse, le format JSON devient très petit une fois compressé et il est aussi assez efficace à charger dans une VM JavaScript

    • Quand j’ai utilisé Lottie, le choix était entre mp4 et Lottie. Comparé à mp4, Lottie était beaucoup plus petit

  • J’aime bien l’idée de gérer les animations avec un format commun ouvert. Mais je trouve dommage qu’en pratique les développeurs web choisissent trop facilement Lottie — qui ajoute déjà plusieurs centaines de ko rien qu’avec les bibliothèques/wrappers, plus un surcoût non négligeable par animation — au lieu d’approfondir CSS ou les animations SVG, qui sont bien plus petites et plus faciles à ajuster. Le site principal de Lottie se vante de la petite taille des fichiers, mais ne se compare qu’aux GIF ou aux PNG, jamais aux animations SVG/CSS, et ça ne me plaît pas. Cela dit, pour des apps mobiles natives, cela semble plutôt bien convenir

    • L’intérêt fondamental de Lottie n’est pas dans des animations simples comme des transitions CSS, mais dans des animations bien plus complexes et libres, presque comme de petits dessins animés. On le voit bien avec les stickers animés de Telegram réalisés avec Lottie (exemple : https://tlgrm.eu/stickers/Princess)

    • En pratique, d’après mon expérience, l’endroit où Lottie brille vraiment, c’est comme format cible depuis des outils de création graphique, surtout After Effects. C’est justement ce point que l’article joint mentionne comme l’avantage initial de Lottie et de son format de fichier. Personne n’écrit ça à la main. Je suis développeur d’apps mobiles et j’ai déjà manipulé des animations Lottie, mais je n’en ai jamais été le créateur direct

    • Pour compléter le point sur le fait qu’il faudrait « mieux apprendre les animations CSS ou SVG », Flash du Web 1.0 était ce qu’il y avait de mieux. Les standards comme CSS et les autres n’ont toujours pas vraiment rattrapé l’expérience qu’offrait Flash. Flash était à la fois un format vidéo, un format d’animation, un environnement de programmation, un lecteur vidéo, un système d’UI interactive, un moteur de jeu, un moteur de développement MMO, un outil d’infographie, bref un outil universel. Si Adobe avait ouvert le format et le lecteur, cela aurait probablement survécu jusqu’à aujourd’hui. Il faut sortir de l’idée fixe selon laquelle CSS/SVG/HTML/JS est l’unique voie possible, et quand on voit qu’après 40 ans on se heurte encore à des problèmes similaires, cela montre qu’il faut peut-être essayer de réinventer la roue

    • Ne pourrait-on pas compiler des animations Lottie en SVG+JS ? J’ai l’impression qu’il manque seulement un outil pour le faire

    • Les animations CSS — et désormais la Web Animations API — peuvent bénéficier de l’accélération matérielle, contrairement à ce type de bibliothèques comme Lottie

  • J’ai une expérience minimale avec Lottie et Rive du point de vue de l’intégration et de l’implémentation, et Rive a été de loin une meilleure expérience. Si jamais je dois choisir entre Lottie et Rive à l’avenir, je me demande s’il me manque quelque chose

    • Je n’ai pas utilisé Rive directement, mais je le suis de près. Je trouve intéressant que le développeur qui a créé Lottie ait rejoint l’équipe Rive il y a environ deux ans. Quand il faudra évaluer un nouvel outil dans ce domaine, je prendrai certainement Rive en compte. Sur les projets auxquels j’ai participé, j’étais fermement opposé à Lottie parce qu’il était difficile de justifier la taille des fichiers par rapport au type d’animation souhaité par les designers. J’ai aussi déjà utilisé SVGator avec succès. Ce qui m’agace aussi, c’est de voir Lottie énormément survendu dans beaucoup d’endroits — notamment des outils comme Webflow, ou par des influenceurs du secteur — sans presque jamais parler de la taille des fichiers. Il existe sûrement des cas d’usage parfaits pour Lottie, mais je pense que, pour la plupart des usages courants, il existe de meilleures options

    • Je n’avais jamais entendu parler de l’outil Rive, et je suis ravi de cette découverte parce qu’il semble exploitable pour mon projet. C’est pour ce genre d’info que je n’arrive pas à quitter HN

  • Dans la bibliothèque UI de notre entreprise, nous utilisons lottie-web pour les composants animés (spinners, barres de progression, etc.). Pourtant, dès qu’on visite la page https://airbnb.io/lottie/#/community-showcase, le ventilateur de mon laptop pro s’emballe complètement. J’ai du mal à croire qu’on aurait le même effet si tout cela avait été fait en CSS

    • Ce qu’il y a sur cette page, ce sont tous des GIF animés

  • Le concept de Lottie est vraiment excellent, mais en pratique c’est très difficile à exploiter. Rive est une nouvelle plateforme qui essaie justement de résoudre ce qui posait problème avec Lottie. En particulier, mettre à jour dynamiquement des données est quasiment impossible avec Lottie. Malgré cela, nous avons réussi à implémenter avec Lottie des animations à données dynamiques pour Valorant Backtrack de Tracker.GG (un format similaire à Spotify Wrapped) (démo : https://tracker.gg/valorant/backtrack/episode6/00d0aa2d-94d3-49ff-823c-8123f2b62848/eyJtb2RlIjoiY29tcGV0aXRpdmUifQ==/0). Pour cela, nous accédions directement à des calques nommés dans les fichiers source (After Effects), et nous avons fait en sorte que chaque slide soit un fichier Lottie séparé afin d’implémenter manuellement des transitions fluides entre les slides. Lottie lui-même ne prend pas en charge nativement l’accès dynamique aux calques, donc nous avons contrôlé les instances Lottie via une bibliothèque séparée, puis construit au-dessus notre propre couche de contrôle des données. Cela a demandé énormément d’itérations entre designers et ingénieurs, et ce n’est pas un format favorable à la collaboration. Dans certains cas, il a même fallu cibler des propriétés de calques via leurs valeurs par défaut réelles, comme une couleur. Le format est vraiment difficile à manipuler. À l’avenir, j’aimerais essayer Rive

  • Nous utilisons Lottie depuis des années pour les animations de marque de PBS KIDS. Il présente divers avantages par rapport à d’autres formats, et même si les performances baissent quand on augmente fortement le rendu runtime en 2D, il s’intègre correctement dans plusieurs pipelines (jeu, app, vidéo). Sur les appareils ou plateformes relativement peu puissants (comme Roku), nous fournissons généralement des images statiques à la place. Grâce au workflow avec After Effects, un seul designer peut créer une animation en boucle puis exporter à la fois du json Lottie/Bodymovin, du Mov (pour la diffusion et YouTube) et du SVG (pour les appareils moins puissants). Depuis la fin de Flash, cela a été un très bon format de transition. Nous utilisons maintenant aussi Rive, et il est possible de réintégrer les anciennes animations json dans le nouveau workflow. J’ai collaboré avec certaines figures importantes de ce domaine, comme Mat Groves de Pixi ou Matt Karl de CloudKid, et durant la transition post-Flash, tout le monde expérimentait ses propres approches, plugins, calculs et formats d’export. Chacun de ces efforts a sa place, et les problèmes d’interopérabilité entre formats existent toujours à cause de la structure logicielle des animations basées sur une timeline. Au final, l’important est de choisir l’outil le plus adapté à son projet

  • Nous avons utilisé lottielab pour créer les animations de notre site (https://resonancy.io), et l’éditeur, véritablement construit autour de SVG, était excellent — probablement le meilleur parmi les outils en ligne. L’expérience globale a été fluide. En revanche, sans l’export vers le service d’hébergement compressé propriétaire de lottielab, les animations étaient trop lourdes pour être réellement utilisables sur une landing page. Cet hébergement compressé réduisait en moyenne la taille d’environ 400 %, donc nous avons fini par payer 30 dollars par mois pour l’utiliser. Je chercherai probablement un format alternatif, mais je n’ai aucune envie de recommencer tout le processus de création d’animation. D’après mon expérience passée avec des bibliothèques d’animation basées sur React, coder soi-même des animations complexes était beaucoup trop difficile, alors qu’avec lottielab on pouvait les créer assez facilement, plus ou moins comme on les imaginait. Je n’ai pas encore essayé Rive, mais je compte le tester. Je serais aussi preneur de recommandations d’outils ou de bibliothèques externes qui compressent efficacement le format Lottie

  • Je ne vois pas ce qui poserait problème avec SWF. La spécification est publique et c’est très efficace. Si la sécurité est une grande préoccupation, on pourrait l’implémenter en retirant simplement les fonctionnalités avancées Turing-complètes. Je suis d’accord avec le commentaire voisin disant que « ce n’est qu’un format JSON de plus ». J’ai l’impression qu’une génération de développeurs, habituée à un environnement web inefficace, a fini par oublier jusqu’au concept même d’efficacité

  • Je me demande quel est aujourd’hui l’état de l’art pour la génération de graphismes vectoriels animés. Les LLM ne tracent pas très bien des chemins SVG esthétiques, et les modèles d’image à diffusion ne prennent en charge que les bitmaps. Il existe une forte demande pour une sorte d’Illustrator génératif couplé à After Effects, et j’espère que quelqu’un tentera quelque chose de vraiment innovant

  • Le problème de Rive (le service concurrent), d’un point de vue artistique, c’est qu’il manque d’intuitivité. On ne peut pas dessiner directement avec un outil plume ou blob, il faut se conformer à un certain workflow — souvent avec import de SVG — et on est loin de l’UI intuitive de Flash. Il a certes beaucoup de fonctionnalités intéressantes, mais ce n’est pas un environnement aussi simple et intuitif que Flash

    • Les images raster (bitmap) sont également prises en charge comme type d’entrée