Qu’est-ce que Lottie ? đź§
Lottie est un format d’animation vectorielle se basant sur des donnĂ©es au format JSON. Il a Ă©tĂ© créé en 2015 par la sociĂ©tĂ© amĂ©ricaine Airbnb.
Airbnb utilise beaucoup d’animations dans son parcours utilisateur et il Ă©tait souvent problĂ©matique pour les dĂ©veloppeurs d’intĂ©grer correctement les animations faites par les designers. Les GIFs fournis Ă©taient difficilement adaptables Ă la rĂ©solution d’écran de l’utilisateur et mettait parfois du temps Ă se charger.
Partant de ce constat, Airbnb a dĂ©veloppĂ© un plugin sur le logiciel Adobe After Effects baptisĂ© Bodymovin. Ce plugin permet d’exporter des animations dans un fichier au format JSON.
Le fichier au format JSON peut ensuite être interprété par les différentes librairies proposées par Lottie : sur un navigateur web, sur une application téléphone native ou encore sur une application Windows.
Les avantages de Lottie sont nombreux :
- Le format est multi-plateforme. Le fichier JSON reste inchangé entre les différentes plateformes cibles.
- La rĂ©solution des images s’adapte en fonction de la taille de l’Ă©cran de l’utilisateur puisque les animations sont au format vectoriel.
- Une animation Lottie est beaucoup plus lĂ©gère qu’une sĂ©quence d’images PNG ou encore un GIF.

“If a PNG is a T-Rex, and a GIF is an elephant, then a Lottie is a puppy.”
- Le format Lottie est beaucoup plus portable que des fichiers SVG animés en CSS.
- Lottie offre Ă©galement une interface web de modification des animations. Il est donc possible de changer un Ă©lĂ©ment graphique de l’animation puis de rĂ©exporter le fichier JSON associĂ©.
Notre besoin chez Indy đź’»
Chez Indy, nous souhaitons proposer à nos utilisateurs une expérience moderne et intuitive afin de faciliter leur compréhension de la comptabilité, une notion parfois difficile à appréhender.
Le but Ă©tait d’annoncer une nouvelle fonctionnalitĂ© dans l’application via une animation Lottie.
RĂ©alisation technique de l’intĂ©gration de l’animation 🛠️
CrĂ©ation d’un composant Vue gĂ©nĂ©rique 🖌️
Nous avons créé un composant gĂ©nĂ©rique responsable du chargement de l’animation via la mĂ©thode loadAnimation
de la bibliothèque lottie-web
. L’utilisation d’animation Lottie dans l’application passe obligatoirement par ce composant.
Ce composant prend en compte 3 props :
lottieJsonPath
: le chemin vers la source de données JSON. Ce paramètre est évidemment obligatoire.loopAnimation
: l’animation doit-elle ĂŞtre jouĂ©e en boucle ? Paramètre optionnel.autoPlayAnimation
: l’animation doit-elle ĂŞtre jouĂ©e Ă l’initialisation du composant ? Paramètre optionnel.
La mĂ©thode loadAnimation peut Ă©galement prendre en compte d’autres paramètres (cf. la documentation), mais nous jugions que ceux-ci Ă©taient inutiles dans notre utilisation. En effet chez Indy, nous respectons le principe YAGNI (« You ain’t gonna need it », qui peut se traduire par « vous n’en aurez pas besoin »). Nous Ă©vitons au maximum l’importation de librairies inutiles et l’implĂ©mentation de code non utilisĂ©s dans l’application.
Voici ce Ă quoi ressemble le composant LottieAnimation :
<template> <div ref="animationContainer" /> </template> <script> export default { name: 'LottieAnimation', props: { lottieJsonPath: { // the JSON path linked to the animation type: String, required: true, }, loopAnimation: { // Do we want the animation to loop? type: Boolean, required: false, default: true, }, autoPlayAnimation: { // Do we want to play the animation on initialization? type: Boolean, required: false, default: true, }, }, data: () => ({ rendererSettings: { scaleMode: 'centerCrop', clearCanvas: true, progressiveLoad: false, hideOnTransparent: true, }, lottieAnimation: undefined, }), async mounted() { await this.init(); }, beforeDestroy() { this.lottieAnimation?.destroy(); }, methods: { [...] }, }; </script>
⚠️ Il est important d’appeler la mĂ©thode destroy
sur l’objet contenant l’animation dans le hook beforeDestroy
de Vue pour éviter les fuites de mémoire.
Lazy loading de la bibliothèque lottie-web ⚙️
La bibliothèque lottie-web est une bibliothèque plutôt lourde (taille gzipped à 67.3 Ko). Ceci est particulièrement impactant si la bibliothèque est située dans le chunk principal lors du build.
Le chargement de la page principale pour un utilisateur n’ayant pas une bonne connexion prendrait un temps beaucoup plus long dans ce cas. La bibliothèque serait quand mĂŞme chargĂ©e, mĂŞme si des pages n’affichent pas d’animation Lottie.
Dans notre cas d’utilisation chez Indy, nous utilisons Lottie pour l’instant qu’Ă un seul endroit. Nous avons souhaitĂ© lazy loader la bibliothèque pour qu’elle ne soit chargĂ©e que quand l’utilisateur ouvre la page contenant l’animation. Dans sa navigation sur les autres pages, la bibliothèque n’est pas chargĂ©e.
Pour lazy loader lottie, nous avons créé un chunk contenant seulement la bibliothèque. La bibliothèque est en mode prefetch, c’est Ă dire qu’elle ne se charge que quand le navigateur est disponible pour effectuer le chargement.
Voici à quoi ressemble la méthode init()
de notre composant LottieAnimation. Elle s’occupe de lazy loader la bibliothèque Lottie puis de configurer l’animation Lottie.
methods: { async init() { const lottie = await import( /* webpackChunkName: "lottie" */ /* webpackMode: "lazy" */ /* webpackPrefetch: true */ 'lottie-web' ); this.lottieAnimation = lottie.loadAnimation({ container: this.$refs.animationContainer, renderer: 'svg', loop: this.loopAnimation, autoplay: this.autoPlayAnimation, path: this.lottieJsonPath, rendererSettings: this.rendererSettings, }); }, },
⚠️ La référence au container dans la méthode loadAnimation
ne doit pas pointer sur un élément HTML contenant des directives Vue telles que v-if
. Autrement, le mapping ne peut pas se faire.
Code complet du composant LottieAnimation 👨🏽‍💻
<template> <div ref="animationContainer" /> </template> <script> export default { name: 'LottieAnimation', props: { lottieJsonPath: { // the JSON path linked to the animation type: String, required: true, }, loopAnimation: { // Do we want the animation to loop ? type: Boolean, required: false, default: true, }, autoPlayAnimation: { // Do we want to play the animation on initialization ? type: Boolean, required: false, default: true, }, }, data: () => ({ rendererSettings: { scaleMode: 'centerCrop', clearCanvas: true, progressiveLoad: false, hideOnTransparent: true, }, lottieAnimation: undefined, }), async mounted() { await this.init(); }, beforeDestroy() { this.lottieAnimation?.destroy(); }, methods: { async init() { const lottie = await import( /* webpackChunkName: "lottie" */ /* webpackMode: "lazy" */ /* webpackPrefetch: true */ 'lottie-web' ); this.lottieAnimation = lottie.loadAnimation({ container: this.$refs.animationContainer, renderer: 'svg', loop: this.loopAnimation, autoplay: this.autoPlayAnimation, path: this.lottieJsonPath, rendererSettings: this.rendererSettings, }); }, }, }; </script>