1. Origine
Le format Lottie
En 2017, Airbnb publie la librairie open-source Lottie : un format d'animation basé sur JSON, exportable depuis After Effects via le plugin Bodymovin. L'objectif initial était d'intégrer des animations riches dans les applications mobiles sans le poids d'une vidéo. Le nom « Lottie » vient de Lotte Reiniger, pionnière du cinéma d'animation. Le format devient rapidement un standard dans l'industrie web et mobile.
La plateforme LottieFiles
LottieFiles est lancée la même année, en 2017, par une équipe basée en Malaisie. Elle centralise l'hébergement, le partage et l'optimisation de ces animations. Rachetée par Jera Technology en 2022, la plateforme a évolué vers un outil de motion design collaboratif plus complet, tout en restant la principale référence pour les animations web légères.
2. Utilité
Pour les sites Webflow, LottieFiles permet d'ajouter des animations de qualité motion design avec des fichiers de quelques kilo-octets, là où une vidéo équivalente pèserait plusieurs mégaoctets. L'intégration via l'élément natif Webflow couvre la majorité des cas : lecture automatique, boucle, déclenchement à l'entrée dans le viewport. Pour les animations synchronisées au scroll, la librairie JavaScript lottie-web expose une API qui permet de contrôler l'animation image par image depuis le code. C'est la solution privilégiée dès qu'un projet nécessite de l'animation sans dégrader les Core Web Vitals.
3. Fonctionnalités
Ce qui rend LottieFiles exploitable au quotidien, c'est la combinaison bibliothèque communautaire + intégration Webflow native + outils d'édition et d'optimisation, une chaîne complète du fichier After Effects jusqu'à la mise en ligne.
- Bibliothèque communautaire : plusieurs millions d'animations gratuites et premium, filtrables par style, catégorie et usage
- Intégration Webflow native : via l'élément Lottie, lecture automatique, boucle, vitesse, direction, configurable directement dans le Designer
- Animations avancées : via lottie-web (npm), lecture au hover, synchronisation au scroll, réactivité au curseur
- @lottiefiles/lottie-interactivity : librairie dédiée aux animations réactives (scroll, curseur, clic) sans JavaScript complexe
- Lottie Creator : éditeur en ligne pour créer des animations simples sans After Effects, adapté aux icônes et loaders basiques (les animations complexes nécessitent toujours After Effects + Bodymovin)
- Outil d'optimisation : pour réduire le poids des fichiers JSON complexes avant intégration
- LottieFiles Figma Plugin : prévisualiser et exporter des animations directement depuis Figma
- Espaces de travail collaboratifs : gestion d'équipe, stockage privé, partage de bibliothèques (plans payants)
4. Cas concrets
→ Sur un site SaaS en Webflow, on intègre des icônes Lottie animées au hover sur les cartes de fonctionnalités via l'élément natif Webflow. Chaque icône s'anime à l'interaction, résultat immédiat sur la qualité perçue, sans JavaScript supplémentaire, avec un impact modéré sur les performances.
→ Sur un site de storytelling avec une narration scrollée, on synchronise une animation Lottie frame par frame avec la position de scroll via GSAP ScrollTrigger et lottie-web. Une illustration complexe se dessine au fil du défilement, créant une expérience narrative immersive que le composant natif Webflow seul ne permet pas d'atteindre.
5. Prix
LottieFiles propose un plan gratuit qui donne accès à la bibliothèque d'animations publiques et aux fonctionnalités essentielles. Les plans payants débloquent le stockage privé, les équipes et les fonctionnalités collaboratives avancées.
→ Consulter les tarifs : lottiefiles.com/pricing
6. Questions fréquentes
Faut-il savoir utiliser After Effects pour utiliser LottieFiles ?
Non. La bibliothèque communautaire propose des milliers d'animations prêtes à l'emploi. Pour des animations sur mesure, After Effects et Bodymovin sont nécessaires, mais Lottie Creator permet de créer des animations simples directement dans le navigateur.
Les animations Lottie impactent-elles les performances du site ?
Très peu, c'est précisément l'avantage du format. Un fichier JSON Lottie est 100 à 1 000 fois plus léger qu'une vidéo équivalente. Sur les animations complexes, l'outil d'optimisation LottieFiles permet de réduire davantage le poids du fichier.
Comment intégrer une animation Lottie dans Webflow ?
Dans l'éditeur Webflow, ajoutez le composant Lottie depuis le panneau d'éléments, puis collez l'URL de l'animation LottieFiles ou uploadez le fichier JSON dans les assets. La lecture, la boucle et la vitesse se configurent directement dans les paramètres du composant.
