Histoire
À l’origine était Airbnb. Vous savez, cette petite entreprise qui propose des locations saisonnières.
Son business reposant exclusivement sur un site web et des applications mobiles, il leur est nécessaire d’avoir la meilleure expérience possible sur toutes les plateformes.
Et pour cela, il leur faut optimiser leur présentation. Leur design en particulier, et tous les éléments qui le composent.
Pour rendre l’expérience parfaite, quoi de mieux que des éléments d’interface animés, interactifs et dont la qualité ne dépend pas de la résolution de l’écran ?
La solution tient dans l’utilisation d’animations vectorielles.
Adobe Flash (aujourd’hui Animate) nous a montré qu’il était possible d’avoir des animations vectorielles interactives et légères sur les sites webs.
Seulement voilà, il n’est malheureusement plus envisageable de l’utiliser pour des raisons de sécurité et iOS en a interdit l’usage.
Mais alors comment faire aujourd’hui pour intégrer des animations vectorielles à une page web ou à une application mobile ?
La solution tient dans un des langages les plus utilisés sur internet : le javascript.
Mais les animateurs ne sont pas des développeurs ! Utiliser Javascript pour créer des animations est un calvaire. Voici un exemple de ce qu’il faut produire pour obtenir une animation javascript très simple.
Compliqué non ?
Alors comment faire pour que les animateurs 2D et les développeurs puissent travailler ensemble sans perdre leurs cheveux ?
Recherches & Développement
Les animateurs 2D qui travaillent sur les interfaces (User Interface ou UI) adorent le logiciel After Effects, car il permet de tester rapidement le fonctionnement des interfaces en adéquation avec l’expérience utilisateur souhaitée.
L’autre avantage d’After Effects est qu’il est prévu pour le développement de plugins complexes. Le lien entre animation et développement tient donc dans ce logiciel.
Maintenant, il faut se mettre d’accord sur le format dans lequel seront exportées ces animations.
Les images vectorielles, comme je l’explique dans un précédent article, sont constituées de points d’ancrage et de points de bézier, et donc de coordonnées dans l’espace, et donc de chiffres.
Ouvrez un fichier SVG dans un éditeur de texte et vous ne verrez (presque) que des chiffres.
Sachant que Javascript est le langage par défaut pour des interactions web, il suffit d’utiliser un format de donnée rapidement lisible par celui-ci, à savoir le JSON (JavaScript Object Notation).
Un fichier JSON est en fait juste un fichier texte qui contient des données facilement lisibles par Javascript.
Solution
On a donc le logiciel d’animation (After Effects), et le format de donnée utilisable par les développeurs (JSON).
Il ne reste plus qu’à développer un plugin After Effects qui permette l’export en JSON. Et c’est exactement ce qu’a fait un certain Hernan Torrisi.
Le plugin Bodymovin est né.
Ok. Mais essayez d’ouvrir un fichier JSON avec Photoshop, Illustrator, ou tout autre logiciel dédié au graphisme !
Impossible.
C’est normal : au même titre que SVG, JSON n’est composé que de chiffres incompréhensibles. Seul un programme en Javascript peut le décortiquer.
Et c’est exactement ce qu’a imaginé l’équipe d’Airbnb.
Lottie était né.
Pour la petite histoire, son nom vient du prénom de la réalisatrice Lotte Reiniger, qui a réalisé le deuxième long-métrage d’animation, Les aventures du Prince Ahmed, 10 ans avant Walt Disney !
Lottie est donc un script Javascript que vous placez sur votre site web ou votre application mobile, qui va permettre de lire votre fichier JSON et de le transformer dans un format lisible (SVG, Canvas ou HTML).
Pour résumer, Lottie est un lecteur de fichier JSON exporté par Bodymovin.
Et comme ce lecteur est écrit en Javascript, vous pouvez contrôler cette animation. Les contrôles possibles sont cependant assez limité : vous pouvez contrôler sa lecture, son arrêt, et la façon dont il lit l’animation. Vous ne pouvez pas contrôler les objets à l’intérieur de l'image.
Implémentation
Pour produire une animation Lottie et la placer sur votre site web ou votre application, vous aurez donc besoin de :
- Télécharger Adobe After Effects
- Télécharger le plugin Bodymovin et l’installer dans After Effects
- Créer votre animation de formes sous After Effects
- L’exporter en JSON grâce à Bodymovin
- Importer le script dans votre plateforme : pour le web, pour iOS, pour Android ou encore React Native. Mais il y en a baucoup d’autres.
- Importer votre fichier JSON comme n’importe quelle autre image et écrire un petit script Javascript pour lire ce fichier grâce au script.
- Le publier.
Pour le web, tout est expliqué très simplement ici.
Lottie vs GIF
Lottie permet la lecture d’animations vectorielles, ce qui rend le fichier JSON très léger.
Un GIF, qu’il soit transparent ou non, contient les informations de chaque pixel. Une image carrée de 100 px de largeur (ce qui est petit) contiendra donc 10 000 pixels, chacun avec des informations de couleur, et ceci multiplié par le nombre d’images que contient l’animation. Il sera donc très lourd.
À taille égale, un GIF peut être 10 à 20 fois plus lourd.
D’autre part, un fichier Json est beaucoup plus contrôlable qu’un fichier GIF.
Enfin, une animation vectorielle ne dépend pas de la résolution : elle sera toujours en haute définition, contrairement au GIF qui, une fois le pixel agrandi, apparaîtra de mauvaise qualité.
Limitations
Certaines limitations existent dues à l’intégration des fonctionnalités dans Bodymovin.
En effet, After Effects permet l’utilisation des expressions, des liens entre calques, des masques, des plugins, et beaucoup d’autres choses, ce qui n’est pas toujours lisible par Lottie.
Chaque plateforme a donc ses propres spécificités car chacune a sa propre librairie : iOS, Android, et React Native.
Pour connaître la liste complète de ces limitations, il faut se référer à ce tableau.
Lottiefiles et Webflow
Il faut faire attention car Lottiefiles n’a rien à voir avec Airbnb.
Lottiefiles est une plateforme qui vous aide à optimiser vos fichiers Json, à collaborer, et à modifier vos fichiers.
Si vous voulez acheter des fichiers Lottie, Lottiefiles vous renverra sur Iconscout, une marketplace qu’ils ont rachetée, et qui était d’abord destinée aux icônes statiques.
J’ai moi-même créé un espace pour vous proposer mes propres fichiers.
Néanmoins, ils proposent des outils intéressants pour tester des animations pour les smartphones, et leur plugin After Effects (qui se base sur Bodymovin) est plus facile à utiliser que Bodymovin.
Quant à Webflow, c’est une plateforme de production de site web sans code. Un wordpress sans prise de tête. Et le script Lottie est déjà intégré. Il vous suffit donc d’importer votre fichier JSON comme n’importe quel autre élément graphique et de le placer sur votre page.
Webflow et Lottiefiles sont très pratiques pour partager ces fichiers particuliers avec ses clients (ils sont illisibles par Powerpoint ou Photoshop par exemple).
Conclusion
Lottie est une excellente technologie pour parfaire les animations de votre site web, améliorer l’expérience utilisateur de votre application, ou encore créer des interactions ludiques et engageantes.
Si vous ne l’avez pas encore testé, je vous invite à essayer dès à présent !
Alexandre Soubrier est un motion designer indépendant qui se passionne pour l'illustration et l'animation. Il a créé le podcast Exquises Exquisses dans lequel il s'entretient avec des auteurs-illustrateurs, et produit ce blog.
Contactez-le ici ou sur Linked In.
