Ajouter des animations à son site web avec Lottie

Vous ne connaissez pas encore Lottie ? Alors préparez-vous à devenir fan de ce genre d’animations compatibles sur le web et le mobile !

Web UI/UX Javascript

Article publié le 27/01/2025, dernière mise à jour le 27/01/2025

Lottie est un format d’animation basé sur JSON, et compatible avec le web, le mobile et même les OS classiques !

Ce format a été créé par Hernan Torrisi en 2015 (pour un plugin appelé Bodymovin)

Contrairement à des fichiers GIF ou vidéo, Lottie permet d’afficher des animations vectorielles et donc de garder une excellente qualité, avec un poids raisonnable.

Il est possible de créer soit même des fichiers Lottie, directement depuis Adobe After Effect, ou bien vous pouvez en trouver des milliers de gratuites sur le site de référence LottieFiles !

Voici un exemple d’animation :

Pourquoi utiliser Lottie ?

Même si nous avons déjà évoqué plusieurs points dans l’introduction, voici les 4 principaux avantages de ces animations :

Légèreté : Les fichiers JSON sont beaucoup plus petits que les fichiers GIF ou vidéo, ce qui améliore les performances.
Qualité : Étant vectorielles, ces animations restent nettes sur tous les types d’écran, y compris les écrans haute résolution.
Personnalisation : Les animations Lottie peuvent être contrôlées dynamiquement via JavaScript pour réagir aux interactions des utilisateurs.
Compatibilité : Elles fonctionnent sur toutes les plateformes modernes (web, iOS, Android).

Et en bonus : C’est très simple d’utilisation.

C’est d’ailleurs ce que nous allons voir tout de suite !

Ajouter une animation Lottie

Vous l’aurez compris, le format Lottie n’est pas un format natif supporté par les navigateurs web.

Il nous faut donc deux choses pour afficher notre animation :

Le lecteur d’animation (le “player”)
Un fichier .json contenant une animation (formes vectorielles et mouvements)

Voyons maintenant étape par étape ce qui est nécessaire pour ajouter une animation sur une page web

Ajouter la bibliothèque Lottie

Pour utiliser une animation Lottie, on commence par inclure la bibliothèque JavaScript du lecteur. Vous pouvez l’ajouter via un CDN :

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>

Mais vous pouvez également l’installer grâce à NPM.

Créer un conteneur pour l’animation

On ajoute ensuite une <div> qui va accueillir l’animation :

<div id="lottie-animation" style="width: 300px; height: 300px;"></div>

Récupérer une animation

Vous pouvez :

Créer vos propres animations dans After Effects ou Figma
Télécharger des animations gratuites sur des plateformes comme LottieFiles
Utiliser une animation hébergée en ligne

Charger l’animation avec JavaScript

Pour finir, il suffit d’ajouter le code suivant pour charger votre fichier JSON et jouer l’animation :

<script>
  const url = 'https://lottie.host/4cd4722c-4ef5-420b-9498-353eef9a35d1/0VLW6C9OUi.json';
  var animation = lottie.loadAnimation({
    container: document.getElementById('lottie-animation'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: url
  });
</script>