Lottie : définition, fonctionnement, avantages et limites pour le web

Une animation Lottie permet d’intégrer sur un site ou dans une application des mouvements vectoriels conçus par un motion designer, sans les transformer systématiquement en GIF ou en vidéo. Elle peut animer un pictogramme, illustrer une étape, confirmer une action ou accompagner un onboarding.

Mais « Lottie » ne veut pas dire automatiquement « léger », « performant » ou « accessible ». Une transition de bouton peut être mieux réalisée en CSS ; une séquence riche en textures sera souvent plus pertinente en vidéo ; une interaction très riche peut orienter vers Rive ou vers les fonctions interactives des runtimes dotLottie récents. Le bon choix dépend d’abord de ce que le mouvement doit apporter à l’utilisateur, puis du niveau d’interaction et du coût réel du rendu.

En bref

Lottie est particulièrement intéressant pour des illustrations vectorielles animées et des micro-interactions suffisamment élaborées pour justifier un moteur d’animation. Pour un effet très simple, du CSS ou un SVG animé sera souvent plus sobre. Pour de la vidéo ou de la vraie 3D, d’autres technologies sont plus adaptées. Pour les interactions à états multiples, il faut aujourd’hui comparer le besoin : Rive est conçu autour de cette logique, mais les runtimes dotLottie récents proposent eux aussi des state machines.

Qu’est-ce que Lottie, exactement ?

Lottie désigne un écosystème d’animation basé historiquement sur des données JSON. Au lieu d’enregistrer une succession d’images comme le ferait une vidéo ou un GIF, le fichier décrit des éléments graphiques et leur évolution dans le temps : formes, tracés, positions, rotations, opacité, couleurs ou interpolations.

Sur le web, un lecteur tel que lottie-web interprète ces données et peut les rendre notamment en SVG, Canvas ou HTML. L’animation reste pilotable par le code : lecture, pause, vitesse, boucle, segment ou déclenchement selon une interaction.

D’où vient Lottie ? De Bodymovin à Airbnb

L’histoire commence avant Lottie avec Bodymovin, créé par Hernan Torrisi en 2015 pour exporter une composition Adobe After Effects vers une description JSON et la restituer dans un navigateur. En 2017, des ingénieurs d’Airbnb ont développé des bibliothèques iOS et Android autour de cette approche et lui ont donné le nom Lottie. Le projet s’est ensuite diffusé sur le web et d’autres plateformes.

Le problème à résoudre était très concret : comment transmettre fidèlement le travail d’un motion designer à une équipe de développement sans recréer à la main chaque mouvement ni livrer systématiquement une séquence vidéo ? Lottie est donc autant un pont entre design et développement qu’un format d’animation.

JSON Lottie ou fichier .lottie : quelle différence ?

Le format historique est un fichier .json qui décrit l’animation. Le format plus récent .lottie, aussi appelé dotLottie, est un conteneur compressé capable de regrouper une ou plusieurs animations avec leurs ressources. Les runtimes dotLottie actuels peuvent également gérer des thèmes, plusieurs animations et des interactions pilotées par des machines d’états. Le choix ne se résume donc plus à « JSON ou fichier compressé » : il dépend du lecteur, des fonctions nécessaires, de la compatibilité recherchée et de la façon dont l’équipe veut distribuer et maintenir ses animations.

Comment passe-t-on d’After Effects à une animation sur un site ?

Conception : le motion designer prépare l’animation, historiquement dans After Effects.

Export : Bodymovin convertit les éléments compatibles en données exploitables par Lottie.

Intégration : le site charge le fichier et un lecteur adapté.

Pilotage : le développeur choisit quand l’animation démarre, s’arrête, boucle ou réagit à l’utilisateur.

QA : l’équipe teste le rendu, la fluidité, l’accessibilité, le responsive et l’impact sur les performances.

Ce dernier point est important : toutes les fonctions d’After Effects ne sont pas reproduites de la même manière. Masques, expressions, effets ou calques 3D peuvent être partiellement supportés selon le moteur de rendu. Le tableau de compatibilité de lottie-web doit donc être vérifié avant de figer une direction artistique.

Quels sont les bons cas d’usage de Lottie ?

Micro-interactions et retours d’état

Une coche animée après l’envoi d’un formulaire, une icône qui change d’état ou une confirmation visuelle peuvent rendre une interface plus compréhensible. Lottie devient intéressant lorsque le mouvement dépasse ce qu’une transition CSS très simple ferait aussi bien.

Onboarding et explication d’un fonctionnement

Une illustration animée peut montrer une succession d’étapes, un geste ou un principe difficile à faire comprendre avec une image fixe. Dans ce cas, l’animation a une fonction pédagogique : elle ne sert pas seulement à « faire joli ».

Illustrations de marque et hero sections

Une illustration vectorielle conçue spécifiquement pour une identité visuelle peut donner du rythme à une page d’accueil ou à une landing page. Ici, le bénéfice tient à la qualité du motion design et à sa cohérence avec la marque, pas au simple fait d’utiliser Lottie.

Chargement et progression

Un loader personnalisé ou une progression peut être pertinent lorsqu’il donne un retour immédiat à l’utilisateur. Pour un spinner élémentaire, en revanche, ajouter une bibliothèque d’animation peut être disproportionné.

Quels sont les avantages réels de Lottie ?

Un rendu vectoriel net : les formes peuvent être redimensionnées sans la pixellisation d’une image matricielle.
Un workflow design-développement efficace : une animation préparée par un motion designer peut être transmise sans tout reconstruire en code.
Un contrôle à l’exécution : lecture, pause, vitesse, boucle ou segments peuvent être commandés par l’interface.
Un écosystème multiplateforme : Lottie dispose de lecteurs pour le web et les principales plateformes applicatives.
Un poids potentiellement très contenu : surtout pour des animations vectorielles bien optimisées, sans textures ni actifs raster lourds.

Potentiellement est le mot important. Un fichier JSON de petite taille n’est pas synonyme de coût nul : le navigateur doit aussi charger le lecteur et recalculer l’animation pendant son exécution.

Quels sont ses inconvénients et ses limites ?

Le fichier peut être léger, mais le rendu coûte du travail

Une animation avec de nombreux tracés, masques ou calques peut solliciter fortement le navigateur, en particulier si plusieurs animations tournent simultanément. Sur mobile, il faut mesurer la fluidité et l’impact réel plutôt que se fier au seul poids du JSON.

Lottie ajoute un runtime JavaScript

Pour une animation très simple, ce coût peut être difficile à justifier face à du CSS ou un SVG animé nativement par le navigateur. Le bon raisonnement consiste à comparer la solution complète, pas uniquement le fichier d’animation.

Tous les effets d’After Effects ne passent pas tels quels

La direction artistique doit être pensée avec les contraintes du moteur de rendu. Une composition superbe dans After Effects peut demander des adaptations avant de devenir une bonne animation web.

Ce n’est pas le meilleur outil pour les images riches ou la vraie 3D

Photos, textures, fumée, bruit, particules complexes ou rendu 3D réaliste correspondent mal à la logique vectorielle de Lottie. Une vidéo optimisée ou un moteur 3D sera généralement plus cohérent.

Lottie est-il toujours plus léger qu’un GIF ou une vidéo ?

Non. Pour une illustration vectorielle adaptée, Lottie peut être beaucoup plus compact qu’un GIF et conserver un rendu net à toutes les tailles. Mais la comparaison doit inclure le fichier, le lecteur JavaScript, les actifs embarqués et le coût de rendu.

Une vidéo moderne bien encodée peut être plus efficace pour une séquence longue ou visuellement riche. Et pour un simple hover de bouton, quelques lignes de CSS seront souvent imbattables. Notre guide pour tester la performance d’un site web permet ensuite de vérifier l’impact dans la page réelle.

Quand Lottie est-il adapté — et quand vaut-il mieux éviter ?

Lottie est bien adapté lorsqu’une animation est principalement vectorielle, qu’elle doit rester nette à différentes tailles, qu’elle provient d’un vrai travail de motion design et qu’elle mérite d’être pilotée dans l’interface. C’est souvent le cas pour une illustration de marque, un onboarding, une confirmation d’action ou une séquence pédagogique courte.

Lottie est moins adapté pour un simple hover, une transition élémentaire, une longue séquence vidéo, des textures ou effets photographiques, de la vraie 3D, ou une animation dont l’information disparaît si le JavaScript ne s’exécute pas. Dans ces cas, CSS, SVG, vidéo ou un moteur interactif spécialisé peuvent être plus simples, plus robustes ou plus performants.

Lottie, CSS, SVG, Rive, vidéo ou 3D : que choisir ?

Besoin	Solution à envisager	Pourquoi
Hover, changement de couleur, transition simple	CSS / SVG	Pas de runtime dédié ; simple à maintenir.
Illustration vectorielle élaborée conçue en motion design	Lottie	Bon pont entre After Effects et l’intégration web.
Animation avec nombreux états et réactions utilisateur	Rive ou dotLottie interactif	Comparer le workflow, la complexité des états, le runtime et la maintenance : les deux écosystèmes savent aujourd’hui gérer des interactions structurées.
Textures, photos, fumée, effets visuels riches	Vidéo WebM / MP4	Plus adapté à une information constituée de pixels et à une séquence longue.
Objet manipulable dans l’espace	Three.js / moteur 3D	Lottie n’est pas un moteur de 3D interactive.

Il ne s’agit donc pas de désigner un vainqueur. Une interface peut très bien utiliser du CSS pour ses boutons, Lottie pour une illustration de marque et une vidéo pour une démonstration produit.

Quatre exemples Lottie à tester directement

Nous conservons les quatre démonstrations historiques de cet article. Elles permettent de voir des animations de complexité différente. Elles proviennent de LottieFiles et ne constituent pas des réalisations clients d’ImagesCréations. Les commandes sont laissées visibles afin que vous puissiez arrêter ou relancer le mouvement.

Exemple 1 — animation LottieFiles.

Exemple 2 — animation LottieFiles.

Exemple 3 — animation LottieFiles.

Exemple 4 — animation LottieFiles.

Pour un projet réel, nous préférons maîtriser l’hébergement de la ressource plutôt que dépendre d’un fichier tiers. Un fallback statique évite aussi de perdre une information si le lecteur ou le fichier ne se charge pas.

Performance : les contrôles à faire avant la mise en ligne

Mesurer le poids de l’animation et celui du lecteur.
Tester sur un smartphone représentatif, pas uniquement sur un Mac récent.
Éviter plusieurs animations complexes actives simultanément au-dessus de la ligne de flottaison.
Déclencher les animations non prioritaires lorsqu’elles entrent dans le viewport.
Stopper ou suspendre ce qui n’est plus visible lorsque l’intégration le permet.
Comparer avec une version CSS/SVG ou vidéo plutôt que supposer que Lottie sera plus performant.
Si un runtime dotLottie récent est envisagé, tester aussi ses modes de rendu disponibles (worker, WebGL ou WebGPU selon l’intégration) au lieu de conclure à partir du seul poids du fichier.

Accessibilité : le mouvement ne doit jamais devenir une barrière

Une animation décorative ne doit pas ajouter de bruit aux technologies d’assistance. Si elle transmet une information, cette information doit aussi être disponible sous une forme textuelle ou statique compréhensible. lottie-web permet notamment d’ajouter un titre et une description au rendu SVG.

Il faut également tenir compte de la préférence système prefers-reduced-motion. Une animation en boucle, un mouvement ample ou un effet déclenché au scroll doit pouvoir être réduit, arrêté ou remplacé lorsqu’il n’est pas indispensable.

Notre grille de décision avant de choisir Lottie

Quel est le rôle du mouvement ? Informer, guider, confirmer, expliquer ou seulement décorer ?

L’animation est-elle principalement vectorielle ? Si elle dépend de photos ou textures, reconsidérer le format.

CSS ou SVG suffiraient-ils ? Si oui, préférer souvent la solution la plus simple.

Faut-il une logique interactive complexe ? Si oui, comparer notamment avec Rive.

Que se passe-t-il sans animation ? L’information et l’action doivent rester compréhensibles.

Quel est le coût réel sur la page ? Tester le fichier final dans le contexte final.

Cette logique rejoint notre approche du motion design : le mouvement doit servir un message ou une interaction. En amont, un moodboard peut cadrer la direction visuelle ; le prototype permet ensuite de juger si l’animation améliore réellement le parcours.

Une animation doit avoir une fonction avant d’avoir une technologie.

ImagesCréations conçoit et intègre des interfaces, animations et expériences digitales en arbitrant design, performance, accessibilité et contraintes techniques.

Parler de votre projet avec notre équipe

Questions fréquentes sur Lottie

Lottie est-il un format vectoriel ?

Lottie est surtout un format de description d’animation. Il peut décrire des formes vectorielles et les lecteurs web peuvent notamment les rendre en SVG. Il peut aussi référencer des images : toutes les animations Lottie ne sont donc pas exclusivement vectorielles.

Quelle différence entre Lottie et SVG ?

SVG est un standard graphique du web. Lottie décrit une animation et peut utiliser SVG comme mode de rendu. Pour une animation simple, SVG associé à CSS peut éviter un runtime supplémentaire ; Lottie devient intéressant pour des séquences plus élaborées issues d’un workflow de motion design.

Lottie est-il meilleur qu’un GIF ?

Pour une animation vectorielle, il offre souvent un rendu plus net et un fichier plus efficace qu’un GIF. Ce n’est pas une règle universelle : il faut comparer les fichiers et le coût du lecteur dans le contexte réel.

Peut-on utiliser Lottie dans WordPress ?

Oui. L’intégration peut passer par un bloc ou une extension compatible, un composant dédié ou une intégration personnalisée. Il faut surtout éviter de multiplier inutilement les lecteurs et dépendances.

Lottie est-il adapté à la 3D ?

Pas pour de la véritable 3D interactive. Certains renderers prennent en charge des fonctions de calques 3D de manière partielle, mais un objet manipulable dans l’espace relève plutôt d’un moteur comme Three.js ou d’un outil 3D spécialisé.

Sources et références

Article publié le 17 novembre 2021. Mis à jour le 1er octobre 2026 par Olivier Robé, ImagesCréations.