Animation Lottie pour le web : les étapes du projet

Animation Lottie pour le web: les étapes du projet

Une Lottie ne transporte pas une suite d’images figées; elle décrit des formes, des tracés, des positions, des rotations et des interpolations que le navigateur peut recalculer au moment de l’affichage.

Cette différence change toute la manière de travailler. Pour réussir une création d’animation Lottie pour le web, il ne suffit pas de produire un mouvement séduisant dans After Effects, puis d’appuyer sur « Exporter ». Il faut préparer le dessin, penser les calques, choisir les effets avec discernement, contrôler le fichier JSON et anticiper la façon dont l’animation sera intégrée dans la page. Le résultat doit être expressif, mais aussi respirer correctement dans l’interface.

Lottie n’est pas une vidéo miniature

Le format Lottie est né d’une idée simple: transformer une animation vectorielle en données exploitables par le web et les applications mobiles. En 2015, Hernan Torrisi a conçu Bodymovin, une extension capable d’exporter des compositions After Effects vers un fichier JSON. En 2017, Airbnb a introduit les bibliothèques Lottie open source pour iOS et Android, contribuant largement à la diffusion du format.

Le fichier obtenu ne contient donc pas une vidéo au sens classique. Il rassemble notamment:

• les formes vectorielles qui composent l’illustration;
• les propriétés de position, d’échelle, de rotation et d’opacité;
• les images clés qui définissent les étapes du mouvement;
• les interpolations, c’est-à-dire la manière dont le navigateur passe d’un état à l’autre;
• les éventuelles ressources associées, selon la composition et les options d’export.

Le rendu peut s’appuyer sur SVG ou sur canvas, selon le lecteur utilisé et la configuration choisie. Dans les deux cas, l’intérêt principal reste le même: l’animation conserve son indépendance de résolution et peut rester nette sur des écrans de densités différentes, sans dépendre d’une série d’images matricielles.

Une Lottie réussie commence avant After Effects: elle naît dans la structure du dessin, dans la séparation des calques et dans la qualité du mouvement imaginé.

Cette architecture explique à la fois la souplesse et les limites du format. Une animation composée de quelques formes simples, avec des mouvements lisibles et peu d’images clés, sera généralement plus facile à charger et à maintenir qu’une scène saturée d’effets, de flous, d’expressions et de textures complexes. Lottie ne remplace pas une vidéo lorsqu’il faut afficher des images réelles, une séquence filmée ou une matière visuelle très lourde. Elle excelle plutôt dans les logos animés, les pictogrammes, les illustrations d’interface, les micro-interactions et les explications visuelles courtes.

Préparer le dessin vectoriel avant toute animation

La première étape d’un projet Lottie consiste rarement à ouvrir After Effects. Je préfère commencer par observer la matière graphique elle-même: combien d’éléments doivent bouger, lesquels doivent rester solidaires, où se trouve le point de tension visuelle et quelle partie du dessin porte réellement le message.

Un fichier Illustrator bien préparé offre une base beaucoup plus saine. Chaque élément susceptible d’être animé doit être placé sur son propre calque, avec un nom compréhensible. Un cercle qui doit apparaître indépendamment du texte ne doit pas être fusionné avec celui-ci. Une ligne qui sera tracée progressivement ne doit pas être noyée dans un groupe impossible à isoler. Cette discipline peut sembler administrative, mais elle protège le rythme de l’animation: elle évite de devoir reconstruire le visuel au milieu du processus.

Une séparation des calques pensée pour le mouvement

Il ne s’agit pas de découper le dessin mécaniquement en une multitude de morceaux. Trop de calques créent une autre forme de confusion, alourdissent la composition et compliquent les corrections. La bonne question est plutôt: quel élément possède sa propre intention de mouvement?

Pour une illustration destinée à une page d’accueil, on pourra par exemple distinguer:

1. Le fond, qui peut rester fixe ou recevoir une variation très légère d’opacité.

2. La forme principale, souvent responsable du mouvement dominant et de la reconnaissance immédiate du visuel.

3. Les détails secondaires, qui viennent soutenir le geste sans le concurrencer.

4. Les tracés, utiles pour une apparition progressive ou un effet de dessin.

5. La typographie, si elle doit être animée séparément, avec une attention particulière portée à sa lisibilité.

6. Les éléments d’accompagnement, comme des points, des étoiles ou des repères, qui donnent de la respiration à l’ensemble.

Avant l’importation, je vérifie aussi les contours, les groupes et les points d’ancrage. Une forme dont le point d’origine est mal placé peut effectuer une rotation surprenante. Le mouvement sera techniquement correct, mais visuellement faux: il donnera l’impression de tirer l’objet depuis un endroit qui n’existe pas.

Les tracés doivent également être propres. Des points inutiles, des courbes trop nombreuses ou des formes complexes sans raison graphique augmentent la quantité de données à traiter. La simplification ne signifie pas appauvrir le dessin. Elle consiste à retirer ce qui ne sert ni la silhouette, ni la texture, ni le mouvement.

Illustrator, Figma et la préparation des assets

Illustrator reste particulièrement confortable lorsque le projet dépend d’une construction vectorielle précise, d’un logo ou d’une illustration détaillée. Figma, de son côté, peut être très utile pour organiser les écrans, valider la place de l’animation dans l’interface et préparer certains éléments graphiques. Il existe des méthodes et des extensions pour exporter une animation Lottie depuis Figma, mais je conseille de distinguer clairement deux usages.

Figma est excellent pour prototyper le comportement d’une interaction: déclenchement au survol, apparition après une action, transition entre deux états. After Effects reste généralement plus adapté lorsque l’on cherche à sculpter le mouvement image par image, régler une courbe d’accélération ou travailler la personnalité d’un geste.

Cette séparation des rôles évite une erreur fréquente: demander à l’outil de prototypage de produire directement une animation finale alors que le projet exige un vrai travail de rythme. Une interface peut sembler agréable dans un prototype, puis perdre toute sa finesse lorsqu’elle est convertie en mouvement réel. Le prototype valide une intention; la composition finale lui donne sa texture.

Construire le mouvement dans After Effects

Une fois les assets importés, le travail devient une affaire de rythme, de hiérarchie et de retenue. Dans une animation web, le mouvement doit être compris rapidement. L’utilisateur ne vient pas nécessairement regarder l’animation; il vient accomplir une action. L’animation doit donc accompagner son attention sans lui demander un effort supplémentaire.

Je commence par identifier trois niveaux:

• le geste principal, celui que l’on doit percevoir même si l’on ne regarde l’écran qu’un instant;
• les mouvements de soutien, qui enrichissent la scène sans détourner le regard;
• les micro-variations, qui donnent de la vie, mais peuvent être supprimées si elles rendent l’ensemble plus confus.

Cette hiérarchie est plus utile qu’une accumulation d’effets. Une forme qui se déplace, change d’échelle et tourne en même temps peut sembler techniquement riche, mais elle ne sera pas forcément plus expressive. La tension visuelle devient vite excessive. Pour une interface, une translation légèrement retardée, une apparition progressive ou une boucle parfaitement équilibrée suffisent souvent à créer une présence.

Les courbes d’animation donnent le caractère

Deux éléments peuvent parcourir la même distance et produire des sensations opposées. Un mouvement linéaire paraît mécanique. Une accélération trop forte semble brusque. Une sortie trop lente donne l’impression que l’objet hésite. Les courbes d’animation sont donc le lieu où se construit le tempérament du projet.

Pour une marque douce et artisanale, je vais chercher des transitions plus souples, avec une entrée progressive et une sortie qui laisse au regard le temps de se poser. Pour une identité plus directe, une accélération franche peut être pertinente. Il ne s’agit pas d’appliquer une recette universelle, mais de mettre le mouvement en accord avec la typographie, la palette et le positionnement de la marque.

La durée doit elle aussi rester liée au contexte. Une animation décorative peut prendre le temps d’installer une forme. Une icône qui confirme une action doit répondre plus rapidement. Un logo affiché au chargement peut tolérer une respiration plus longue, à condition de ne pas retarder l’accès au contenu. Le même mouvement, placé dans ces trois situations, ne produira pas la même expérience.

Les limites d’exportation doivent être anticipées

After Effects permet d’explorer une grande variété d’effets, mais tous ne sont pas pris en charge de la même manière par les moteurs de rendu Lottie. Les expressions complexes, certains effets natifs, les éléments 3D lourds, les flous élaborés ou certaines déformations peuvent ne pas être exportés correctement, ou produire un résultat différent de celui observé dans After Effects.

C’est pourquoi je prévois toujours une vérification intermédiaire. Je n’attends pas la fin de la composition pour découvrir qu’un effet central disparaît à l’export. Dès qu’un mouvement important est en place, je produis une première version Lottie et je l’observe dans un environnement proche de son usage final.

Cette itération permet de répondre à des questions très concrètes:

• La forme conserve-t-elle son contour et ses proportions?
• Les masques se comportent-ils comme prévu?
• La typographie reste-t-elle lisible à la taille réelle?
• La boucle se referme-t-elle sans saut perceptible?
• L’animation attire-t-elle l’œil au bon endroit?
• Le rendu reste-t-il cohérent lorsque l’espace disponible diminue?

Une animation peut être impeccable dans la fenêtre de composition et déséquilibrée une fois intégrée dans une page. Le contexte révèle alors des problèmes que la création isolée dissimulait: contraste insuffisant, rythme trop rapide, détails illisibles, mouvement qui entre en conflit avec un bouton ou avec un titre.

Exporter un fichier Lottie propre et exploitable

L’export est réalisé avec Bodymovin ou avec le module LottieFiles, selon l’environnement de travail et les besoins de l’équipe. L’outil convertit les formes, les tracés et les images clés en données JSON lisibles par les navigateurs et les bibliothèques compatibles.

Cette conversion n’est pas une formalité. Elle transforme une composition visuelle en un objet technique qui doit rester compréhensible, stable et raisonnablement léger. Le nombre de calques, la complexité des tracés, la quantité d’images clés et l’usage d’images externes influencent directement le fichier final. Il n’existe donc pas de poids moyen valable pour toutes les animations Lottie: deux compositions de même durée peuvent produire des fichiers très différents.

Ce que je contrôle après l’export

Je relis le fichier comme on relit une maquette avant impression. Pas seulement pour vérifier que le dessin est présent, mais pour m’assurer que l’expérience est intacte.

1. Je vérifie la composition complète. Aucun élément ne doit manquer, se décaler ou changer de couleur entre After Effects et le rendu web.

2. Je contrôle les dimensions d’affichage. Le caractère vectoriel ne dispense pas de penser au cadre: une animation trop grande ou mal positionnée peut provoquer une gêne dans l’interface.

3. Je teste la boucle. Le dernier état doit rejoindre le premier avec naturel, sans clignotement ni rupture de rythme.

4. Je retire les détails inutiles. Un tracé invisible, un calque résiduel ou une image non exploitée n’a aucune raison de rester dans le fichier.

5. Je compare plusieurs tailles d’écran. Le mouvement peut être élégant sur ordinateur et trop présent sur mobile.

6. Je vérifie le comportement lorsque l’animation est interrompue. Une interface ne doit pas devenir incompréhensible parce qu’une personne a changé d’onglet ou désactivé les animations.

L’optimisation du JSON Lottie pour un site web repose donc moins sur une compression magique que sur une conception plus attentive. Simplifier un tracé, réduire les images clés inutiles, limiter les effets et éviter de faire bouger chaque détail sont souvent les décisions les plus efficaces.

Le fichier le plus performant n’est pas celui que l’on compresse à la dernière minute; c’est celui dont chaque forme a une fonction claire.

JSON ou dotLottie?

Le fichier JSON est la forme la plus courante et la plus directement identifiable. Il contient les informations nécessaires au rendu de l’animation, tandis que les ressources supplémentaires peuvent être gérées séparément selon la configuration.

Le format dotLottie a été introduit pour aller plus loin. Il peut regrouper plusieurs animations, leurs ressources, des métadonnées et différents états dans un seul fichier portable, avec l’extension .lottie. Cette organisation devient intéressante lorsqu’un projet comporte plusieurs variantes: animation de chargement, état actif, état de succès, version sombre, version claire ou déclinaisons selon le contexte.

Le choix dépend toujours de la nature du visuel. Une animation Lottie n’est pas automatiquement la meilleure solution parce qu’elle est à la mode ou parce qu’elle est vectorielle. Pour un arrière-plan cinématographique, une vidéo peut être plus cohérente. Pour une icône qui change d’état ou un petit geste graphique lié à une interaction, Lottie possède en revanche une finesse remarquable.

Intégrer l’animation dans un site web

L’intégration d’une animation Lottie dans un site web se prépare dès la conception. Avant de remettre le fichier, je demande toujours où il sera placé, ce qui doit déclencher sa lecture et ce que l’utilisateur doit comprendre grâce à elle.

Une animation peut se lancer:

• automatiquement au chargement d’une page;
• lorsque l’élément entre dans la zone visible;
• au survol d’un bouton ou d’une carte;
• après une action réussie;
• au clic;
• en boucle, avec une fréquence très mesurée;
• à partir d’un état précis, lorsque l’utilisateur revient sur l’interface.

Le déclencheur modifie le dessin lui-même. Une animation lancée une seule fois peut raconter une progression. Une animation en boucle doit posséder un point de retour discret. Une micro-interaction déclenchée au survol doit être assez courte pour ne pas ralentir l’action, mais assez lisible pour signaler que l’interface a réagi.

Penser le rendu, pas seulement le fichier

Les bibliothèques Lottie permettent de contrôler la lecture, la pause, la vitesse et parfois la progression de l’animation. Le choix du lecteur dépend du projet, du framework utilisé et du niveau d’interaction attendu. Dans tous les cas, l’intégration doit respecter le comportement général de la page.

Je porte une attention particulière à quatre zones souvent négligées:

Le chargement initial

Une animation placée en haut de page ne doit pas retarder l’accès au contenu essentiel. Elle peut être différée, chargée lorsque la zone devient visible ou remplacée par un état statique temporaire. La beauté du mouvement ne doit pas se payer par une attente silencieuse.

La version mobile

Sur petit écran, l’espace visuel est plus tendu. Un mouvement qui semblait discret sur une maquette large peut prendre toute la place autour d’un titre ou d’un bouton. Il peut être nécessaire de réduire l’échelle, de simplifier la composition ou de proposer une version moins détaillée.

L’accessibilité

Certaines personnes préfèrent limiter les mouvements. Le site doit pouvoir respecter les préférences de réduction des animations du système, ou au minimum proposer une alternative statique lorsque le mouvement n’apporte pas d’information indispensable. Une animation décorative doit rester décorative: elle ne doit pas devenir la seule façon de comprendre une action.

Le référencement et le contenu

L’animation ne remplace ni un texte explicatif, ni un libellé, ni une information accessible au navigateur. Un pictogramme animé peut accompagner un bouton, mais le bouton doit conserver un intitulé clair. Une illustration Lottie peut enrichir une section, mais elle ne doit pas porter seule une information essentielle.

De la première esquisse à la version finale: une méthode de studio

Pour garder une production fluide, je découpe le projet en cinq étapes. Elles ne sont pas rigides, car chaque identité visuelle possède son propre rythme, mais elles donnent un cadre qui évite les allers-retours coûteux.

1. Définir le rôle de l’animation

Avant de dessiner, je formule sa fonction en une phrase. Doit-elle attirer l’attention, expliquer une action, confirmer une réussite, donner une présence à une page ou simplement installer l’univers de la marque? Si sa fonction reste vague, le mouvement risque de devenir décoratif par défaut.

2. Produire une planche statique

Je prépare une image fixe avec les formes, les couleurs, les proportions et la hiérarchie visuelle. Cette étape permet de valider l’identité avant de lui ajouter du mouvement. Une composition faible ne devient pas automatiquement plus juste lorsqu’elle est animée; elle devient souvent plus difficile à corriger.

3. Organiser les calques et les points d’ancrage

Chaque élément reçoit un nom, une place et une intention. Je décide ce qui doit apparaître, se déplacer, se transformer ou rester immobile. C’est à ce moment que se dessine la respiration générale de la séquence.

4. Animer par niveaux

Je commence par le geste principal, puis j’ajoute les mouvements secondaires. Cette méthode permet de préserver l’équilibre. Si tout est animé dès la première version, il devient difficile de savoir ce qui porte réellement le message.

5. Exporter, tester, simplifier

La version Lottie est examinée dans le contexte final, avec son cadre, son texte et ses interactions. Je compare le résultat à l’intention de départ, puis je simplifie lorsque le fichier ou le mouvement s’éloigne de cette intention. Une itération peut consister à supprimer une rotation, raccourcir une boucle ou retirer trois détails presque invisibles. Ce sont souvent ces petites soustractions qui rendent l’animation plus élégante.

Le budget et le délai dépendent surtout de la complexité du visuel, du nombre d’états à produire et du niveau d’interaction demandé. Une icône animée à partir d’un dessin déjà propre ne demande pas le même travail qu’une scène complète avec plusieurs variantes, une logique de déclenchement et des adaptations mobiles. Pour cadrer un projet, il est donc plus pertinent de décrire le nombre d’animations, leurs déclencheurs et leurs déclinaisons que de parler seulement de durée.

Ce que Lottie change dans une identité de marque

Une identité animée ne consiste pas à faire bouger un logo pour le rendre plus moderne. Le mouvement ajoute une dimension temporelle à la marque. Il introduit un avant, un pendant et un après. La typographie peut apparaître avec retenue, un symbole peut se déployer, une forme peut se rapprocher d’une autre: chacun de ces gestes donne une indication sur la personnalité de l’entreprise.

J’aime particulièrement observer la relation entre la typographie et l’animation. Une police très construite, aux contrastes marqués, supporte rarement le même rythme qu’une grotesque souple et régulière. Les lettres possèdent déjà leur propre texture, leurs pleins, leurs vides et leurs tensions. Si le mouvement les brusque, la lecture perd sa respiration. S’il les accompagne, l’identité gagne une présence presque physique.

C’est aussi pour cette raison que je conseille de ne pas multiplier les animations Lottie sur une même page. Plusieurs mouvements peuvent créer une jolie démonstration technique, mais ils entrent rapidement en concurrence. Le regard ne sait plus où se poser. Une animation principale, soutenue par quelques réactions discrètes, produit souvent une expérience plus généreuse qu’une collection d’effets indépendants.

La création d’animation Lottie pour le web est finalement un exercice d’équilibre entre dessin, mouvement et intégration. Le format offre une grande précision, un rendu vectoriel et une belle capacité d’interaction, mais il récompense les projets préparés avec soin. Les calques doivent être pensés pour bouger, les effets choisis pour leur pertinence, le JSON contrôlé après export et l’expérience observée dans sa véritable page.

Je vous conseille de commencer par une animation modeste: un symbole, une transition, un état de bouton ou une illustration courte. Observez ce que le mouvement apporte réellement à votre identité, puis développez cette grammaire avec la même attention que votre palette ou votre typographie. Car la question la plus intéressante n’est pas de savoir ce que votre marque peut animer, mais ce que son mouvement permet enfin de faire ressentir.