Lottie ou Rive : quel format d'animation web choisir ?

Lottie ou Rive: quel format d’animation web choisir?

Pourtant, ces deux usages sont souvent traités avec le même format, au risque d’ajouter de la friction, du poids et une logique d’interaction difficile à maintenir.

En mars 2026, Lottie reste très largement adopté: l’écosystème lottie-web, lottie-ios et lottie-android représente environ 4,2 millions de téléchargements hebdomadaires sur npm, contre environ 134 000 pour Rive. Ce rapport ne désigne pas automatiquement le meilleur outil. Il indique surtout que Lottie bénéficie d’un écosystème mature, tandis que Rive répond à un besoin plus spécialisé: l’animation vectorielle interactive en temps réel.

Le choix entre Lottie ou Rive pour une animation web dépend donc de trois variables: le type de mouvement, le niveau d’interactivité et la manière dont l’équipe veut produire puis maintenir l’animation.

L’héritage Lottie: un flux de production efficace pour les animations linéaires

Lottie repose historiquement sur un flux de travail connu des équipes de création graphique: l’animation est conçue dans Adobe After Effects, puis exportée avec le module Bodymovin vers un fichier JSON. Ce fichier est ensuite interprété par une bibliothèque de lecture sur le web ou dans une application mobile.

Le modèle est simple:

1. Le designer construit l’animation dans After Effects.

2. Le module d’export convertit les calques et les propriétés compatibles.

3. Le développeur intègre le fichier JSON avec lottie-web ou une bibliothèque équivalente.

4. L’interface contrôle la lecture: démarrage automatique, pause, boucle, progression liée au défilement ou déclenchement au survol.

Cette chaîne explique une grande partie de l’adoption de Lottie. Les designers motion n’ont pas besoin de changer immédiatement d’environnement de production. Les développeurs disposent de bibliothèques documentées et d’un grand nombre d’animations prêtes à l’emploi. Les plateformes de diffusion d’assets, notamment LottieFiles, renforcent encore cet avantage.

Lottie convient particulièrement à une animation dont la chronologie est déjà définie:

• une icône de validation après l’envoi d’un formulaire;
• une illustration animée dans une page d’accueil;
• un indicateur de chargement;
• une transition entre deux écrans;
• un mouvement décoratif déclenché par l’entrée dans la fenêtre;
• une courte démonstration produit;
• une animation de marque jouée en boucle.

Dans ces cas, le fichier décrit essentiellement une séquence. La page décide quand la lancer, mais ne modifie pas nécessairement la logique interne du personnage, de l’objet ou de l’illustration.

Le coût réel du workflow After Effects

Ce flux n’est pas entièrement automatique. After Effects permet de produire des animations complexes, mais toutes ses fonctions ne sont pas exportées de manière identique. Les effets, expressions, masques, modes de fusion ou filtres avancés peuvent nécessiter une vérification après export.

Le point de contrôle ne se situe donc pas uniquement dans After Effects. Il se trouve entre l’intention visuelle et le rendu final dans le navigateur.

Pour limiter les écarts:

• réduisez le nombre de calques inutiles avant l’exportation;
• convertissez les formes et textes selon les besoins du fichier final;
• évitez les effets qui n’ont pas d’équivalent fiable dans le lecteur;
• testez l’animation sur les navigateurs ciblés;
• contrôlez la taille du fichier et le nombre d’images affichées;
• prévoyez un comportement de remplacement si l’animation ne peut pas être rendue.

Une animation Lottie n’est pas une vidéo miniature. Elle est recalculée à partir de données vectorielles et de propriétés d’animation. Le navigateur doit donc interpréter la structure du fichier, construire les éléments graphiques et les afficher au fil de la lecture.

Lottie est le choix rationnel lorsque l’interface doit lire une animation déjà composée. Rive devient pertinent lorsque l’interface doit piloter cette animation en continu.

Rive et le moteur binaire: une approche native de l’interactivité

Rive part d’une logique différente. L’outil dispose de son propre éditeur et ne dépend pas d’After Effects. L’animation, les éléments graphiques et les comportements sont conçus dans un même environnement, puis exportés dans un fichier binaire propriétaire .riv.

La différence entre Lottie et Rive se situe surtout dans la gestion de l’état.

Avec Lottie, le développeur contrôle généralement une séquence: il lance, arrête, accélère ou rembobine une animation. Avec Rive, le designer peut configurer une machine d’états directement dans l’éditeur. Cette machine relie des entrées, des déclencheurs et des transitions.

Une interface peut ainsi réagir à plusieurs conditions:

• l’utilisateur survole un bouton;
• un champ passe de l’état vide à l’état valide;
• une carte est sélectionnée;
• un curseur atteint un seuil;
• une étape de formulaire est terminée;
• une donnée reçue par l’application modifie l’état visuel;
• une action déclenche une transition différente selon le contexte.

La logique n’est plus seulement: lire l’animation de 0 à 100 %. Elle devient: si l’état A est actif et que l’événement B survient, passer à l’état C avec telle transition.

Pourquoi la machine d’états change la conception

Une animation interactive comporte rarement une seule trajectoire. Un bouton peut être au repos, survolé, pressé, désactivé, en chargement ou confirmé. Dans une approche strictement chronologique, chaque variante peut devenir une animation indépendante, avec des conditions dispersées dans le code.

Rive centralise cette logique dans la machine d’états. Le designer définit les relations visuelles et les transitions. Le développeur transmet ensuite les événements ou les valeurs nécessaires.

Cette séparation réduit la friction entre conception et intégration. Elle ne supprime pas le besoin de développement, mais elle évite de transformer chaque interaction en succession de correctifs spécifiques.

Prenons une animation de validation de paiement. Une séquence Lottie peut très bien afficher une coche après la réussite de l’opération. En revanche, si le même composant doit:

• réagir à la saisie;
• afficher une erreur;
• revenir à l’état initial;
• présenter une progression;
• gérer une attente réseau;
• confirmer le résultat avec une transition différente;

alors une machine d’états devient plus lisible qu’un ensemble de contrôles de lecture indépendants.

Rive est particulièrement adapté aux interfaces où l’animation porte une information fonctionnelle. Le mouvement n’est plus une couche décorative. Il devient une partie de l’affordance: il indique ce qui peut être activé, ce qui est en cours et ce qui vient de changer.

Lottie contre Rive: deux modèles techniques

Le tableau suivant résume le choix sans réduire la comparaison à une opposition entre ancien et nouveau format.

Cette distinction donne une règle de conception utile: ne choisissez pas un format à partir du seul aspect visuel. Deux animations qui se ressemblent à l’écran peuvent exiger des architectures totalement différentes.

Performance et poids: le format ne suffit pas à prédire le résultat

La performance est souvent présentée comme un duel direct entre JSON et binaire. Cette lecture est trop courte. Le poids du fichier, la complexité de la scène, le nombre de formes, les effets utilisés, la fréquence de mise à jour et le contexte d’exécution influencent tous le résultat.

Lottie doit interpréter une structure JSON. Cette étape peut générer une charge supplémentaire lorsque l’animation contient beaucoup d’éléments ou lorsque plusieurs animations sont chargées en même temps. Le fichier est lisible et relativement facile à inspecter, mais cette souplesse ne signifie pas que chaque animation sera légère.

Rive utilise un fichier .riv associé à un moteur de rendu GPU dédié, Rive Renderer. Cette architecture réduit l’empreinte mémoire et la charge processeur par rapport à l’analyse d’un fichier JSON, selon la scène et l’implémentation. Elle est cohérente avec des interfaces qui doivent répondre à des changements continus plutôt que lire une séquence isolée.

Le paquet npm @rive-app/canvas représente environ 3 Mo non compressés. Cette valeur concerne le paquet d’exécution, pas le poids final d’une animation précise. Il ne faut pas la confondre avec la taille transférée à l’utilisateur: compression, découpage, mise en cache et configuration de la livraison modifient le résultat.

Les points de mesure qui comptent réellement

Pour comparer deux animations, nous devons mesurer la même intention visuelle dans des conditions proches. Un fichier Lottie très simple peut être plus efficace qu’une scène Rive surdimensionnée. À l’inverse, un composant Rive interactif peut éviter de charger plusieurs séquences Lottie séparées.

Mesurez au minimum:

• le poids transféré après compression;
• le temps de chargement du module d’exécution;
• la consommation mémoire pendant la lecture;
• l’utilisation du processeur lorsque l’animation reste active;
• la fluidité pendant le défilement;
• le comportement sur mobile;
• la durée d’affichage avant interaction;
• la présence d’un repli statique accessible.

Ne testez pas uniquement sur ordinateur. Une animation placée dans une zone visible immédiatement peut affecter le rendu initial. Une autre, située plus bas dans la page, peut être chargée après l’entrée dans la fenêtre. Le même fichier n’aura pas le même impact selon son emplacement dans l’interface.

Réduire la charge sans dégrader l’affordance

Le premier gain vient souvent de la conception, pas du remplacement de l’outil.

Pour une animation Lottie:

• simplifiez les formes répétées;
• réduisez les trajectoires inutiles;
• limitez les effets qui exigent un calcul permanent;
• ne chargez pas toutes les animations au premier affichage;
• utilisez une lecture différée pour les éléments situés sous la ligne de flottaison;
• arrêtez une boucle lorsque l’élément n’est plus visible.

Pour une animation Rive:

• limitez le nombre d’états simultanément actifs;
• évitez de transformer un petit mouvement d’interface en scène complexe;
• ne laissez pas un composant animé tourner lorsqu’il n’apporte plus d’information;
• vérifiez les entrées de la machine d’états afin d’éviter des transitions contradictoires;
• contrôlez la taille du moteur chargé avec l’animation;
• séparez les composants réutilisables des illustrations purement décoratives.

Le principe est constant: chaque mouvement doit signaler une action, un changement ou une relation. Une boucle qui ne sert qu’à attirer l’œil ajoute de la charge cognitive et de la charge technique.

Le cas des animations interactives

Pour intégrer une animation interactive au web, commencez par décrire les états avant de choisir le format. Cette étape évite de confondre animation et comportement.

Écrivez les états du composant:

1. Repos: l’élément attend une action.

2. Survol ou focus: l’interface signale qu’une interaction est possible.

3. Activation: le mouvement confirme la prise en compte.

4. Attente: l’animation indique qu’un traitement est en cours.

5. Succès ou erreur: le composant transmet le résultat.

6. Retour: l’utilisateur peut recommencer ou modifier son action.

Si le composant possède une seule séquence, Lottie répond généralement au besoin. Si chaque état dépend d’événements et de valeurs, Rive offre une structure plus adaptée.

Cette méthode concerne aussi les éléments graphiques qui semblent simples. Une mascotte animée dans un configurateur produit peut changer d’expression selon une sélection. Un curseur peut modifier la posture d’un personnage. Une illustration peut réagir à la progression d’un formulaire. Dans ces situations, la valeur de l’animation réside dans sa capacité à maintenir une relation avec l’interface.

Accessibilité: le mouvement ne doit pas porter seul le sens

L’animation ne doit jamais être l’unique canal d’information. Une coche animée ne remplace pas un message de réussite. Un changement de couleur ne remplace pas un libellé d’erreur. Un mouvement de bouton ne remplace pas un état de focus visible.

Prévoyez:

• un texte ou une propriété accessible pour l’état affiché;
• une indication de focus indépendante de l’animation;
• un comportement cohérent avec la réduction des mouvements;
• un état statique lorsque le moteur ne se charge pas;
• une durée suffisante pour comprendre la transition;
• une absence de boucle permanente si elle détourne l’attention.

La machine d’états de Rive peut organiser les transitions, mais elle ne garantit pas l’accessibilité du composant. De même, Lottie peut produire une animation parfaitement fluide sans transmettre la moindre information aux technologies d’assistance. L’accessibilité reste une décision d’interface.

LottieFiles, dotLottie et la convergence des fonctions

Lottie conserve un avantage massif en matière d’adoption et de ressources disponibles. Les équipes trouvent facilement des illustrations, des icônes et des exemples d’intégration. Cette abondance réduit le temps de recherche, surtout pour les projets qui utilisent des animations décoratives ou des séquences standardisées.

L’évolution du format .lottie cherche toutefois à réduire certaines limites du JSON classique. Fin 2025, LottieFiles a introduit la prise en charge des machines d’états dans le format dotLottie. Cette évolution rapproche Lottie de certains usages associés à Rive: l’animation peut progressivement intégrer davantage de logique interactive sans abandonner son écosystème historique.

Il faut néanmoins distinguer deux choses:

• l’existence d’une fonction dans un format;
• la maturité de son usage dans une production réelle.

Une fonction de machine d’états peut être disponible sans que les outils, les bibliothèques, les workflows de validation et les compétences d’équipe soient équivalents à ceux d’un outil conçu autour de cette logique depuis le départ.

Rive conserve donc un avantage structurel lorsque l’interactivité constitue le cœur de l’animation. Lottie reste plus pratique lorsque l’équipe dispose déjà d’un grand catalogue d’assets, d’un flux After Effects établi et de besoins de lecture relativement simples.

Les mises à jour de mars 2026 sur les fonctions de liaison de données montrent aussi que l’écart continue de se déplacer. Les formats ne sont pas figés. Une décision valable aujourd’hui doit rester réversible: documentez le comportement attendu, séparez les assets de la logique métier et évitez de rendre toute l’interface dépendante d’un seul composant animé.

Quel format choisir selon le projet?

Choisissez Lottie pour une séquence visuelle maîtrisée

Lottie est le choix le plus direct si vous devez:

• exporter une animation existante depuis After Effects;
• intégrer rapidement une illustration dans une page;
• afficher une confirmation ou un chargement;
• synchroniser un mouvement avec le défilement;
• utiliser un asset provenant d’une bibliothèque existante;
• conserver une chaîne de production déjà connue par l’équipe;
• limiter la logique au démarrage, à la pause, à la boucle ou à la progression.

Dans ce cas, le format réduit la friction de production. Vous réutilisez des compétences et des ressources déjà disponibles. Le principal travail consiste à nettoyer l’export, à contrôler le poids et à bien choisir le moment du chargement.

Choisissez Rive pour un composant qui change d’état

Rive devient plus pertinent si vous devez:

• construire une interaction dans l’éditeur;
• piloter une animation avec plusieurs entrées;
• gérer des transitions conditionnelles;
• synchroniser le mouvement avec des données d’interface;
• créer un personnage ou un objet réactif;
• éviter de multiplier les fichiers pour les états d’un même composant;
• maintenir une logique visuelle complexe sur plusieurs supports.

Le bénéfice principal n’est pas nécessairement une animation plus spectaculaire. C’est une meilleure correspondance entre la structure du design et la structure du comportement.

Ne choisissez pas Rive uniquement pour le mot « interactif »

Un survol simple ne justifie pas toujours un moteur d’animation complet. Si un bouton passe d’un état visuel à un autre avec une transition courte, une animation CSS peut être plus légère, plus prévisible et plus facile à maintenir.

De la même manière, ne choisissez pas Lottie parce que le fichier est immédiatement disponible. Un asset prêt à l’emploi peut devenir coûteux si vous devez ensuite détourner sa chronologie pour gérer des dizaines de cas d’interface.

Avant toute production, posez trois questions:

• L’animation suit-elle une chronologie fixe ou répond-elle à des états?
• Le contenu visuel doit-il être modifié par des données reçues en temps réel?
• L’équipe préfère-t-elle maintenir une séquence exportée ou un système de comportements?

Les réponses orientent souvent le choix avant même la comparaison des bibliothèques.

Le bon format n’est pas celui qui produit le mouvement le plus riche. C’est celui qui maintient la relation la plus simple entre l’état de l’interface et ce que l’utilisateur voit.

Une méthode d’arbitrage pour une intégration web durable

Pour un projet réel, avancez en quatre étapes.

1. Définissez la fonction de l’animation

Classez le mouvement dans une seule fonction principale:

• informer;
• confirmer;
• guider;
• décorer;
• attirer l’attention;
• permettre une interaction.

Une animation décorative n’a pas les mêmes contraintes qu’un indicateur d’état. Cette classification détermine la priorité donnée au poids, à l’accessibilité et à la réactivité.

2. Décrivez le modèle d’état

Listez les états visibles et les événements qui provoquent le passage de l’un à l’autre. Si vous ne pouvez pas décrire clairement ces transitions, l’animation n’est pas encore spécifiée.

Pour une séquence Lottie, vous aurez souvent une lecture principale et quelques contrôles périphériques. Pour Rive, vous devrez définir les entrées et les transitions de la machine d’états. Cette différence de préparation est normale: elle reflète la complexité du comportement.

3. Produisez un prototype réduit

Ne commencez pas avec l’illustration finale. Prototypez d’abord:

• une forme;
• deux ou trois états;
• une transition;
• un événement d’entrée;
• un état de retour.

Vous vérifierez ainsi l’affordance, la lisibilité et la réactivité sans mobiliser tout le travail d’illustration. Le prototype révèle rapidement si le projet nécessite réellement Rive ou si une séquence Lottie suffit.

4. Testez le scénario, pas seulement l’animation

Une animation peut être fluide dans l’éditeur et devenir confuse dans la page. Testez le composant avec:

• une connexion lente;
• un affichage mobile;
• une navigation au clavier;
• une préférence de réduction des mouvements;
• un écran de petite taille;
• une erreur réseau;
• une répétition de l’action;
• une sortie de la zone visible.

Observez le délai, la compréhension et le retour d’état. La fluidité ne compense pas une hiérarchie visuelle mal construite.

Décision finale: Lottie par défaut, Rive par besoin comportemental

Lottie reste le choix par défaut pour une grande partie des animations web. Son adoption, ses bibliothèques et son catalogue d’assets réduisent le temps d’intégration. Il convient aux séquences linéaires, aux illustrations et aux micro-interactions dont la logique reste simple.

Rive prend l’avantage lorsque l’animation devient un composant d’interface piloté par plusieurs états. Son format binaire, son moteur de rendu dédié et sa machine d’états native répondent mieux aux interactions continues et aux comportements conditionnels. Cette spécialisation implique un écosystème plus restreint et une appropriation différente de l’outil.

Ne cherchez donc pas un vainqueur universel. Choisissez Lottie pour lire efficacement un mouvement conçu ailleurs. Choisissez Rive pour concevoir et maintenir un mouvement qui participe directement au fonctionnement de l’interface.

Avant la mise en ligne, validez ces points:

• le rôle de l’animation est défini en une phrase;
• les états et les déclencheurs sont documentés;
• le format choisi correspond au niveau réel d’interactivité;
• le fichier est chargé au moment utile, et non systématiquement au premier affichage;
• l’état visuel possède une équivalence textuelle ou sémantique;
• le composant reste compréhensible sans mouvement;
• le rendu est testé sur mobile et avec une préférence de réduction des animations;
• le poids et la consommation de ressources sont mesurés sur le scénario complet;
• une solution de repli est prévue en cas d’échec du chargement.

Cette méthode évite le mauvais arbitrage: adopter Rive pour une simple séquence ou forcer Lottie à gérer une logique qui devrait être modélisée comme un système d’états.