Comment intégrer une animation Lottie dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment intégrer une animation Lottie dans Webflow.

1. Téléchargez votre animation Lottie

Trouvez une animation sur LottieFiles ou exportez la vôtre depuis After Effects. Téléchargez le fichier JSON (ou dotLottie).

2. Ajoutez l'élément Lottie dans Webflow

Dans le Designer, faites glisser l'élément Lottie Animation depuis le panneau Add Elements. Dans les Settings, cliquez sur Upload JSON et uploadez votre fichier d'animation.

3. Configurez les options de lecture

Dans les Settings de l'élément Lottie : Autoplay (lecture automatique), Loop (lecture en boucle), Speed (vitesse de lecture, 1 = normale). Pour des animations déclenchées au scroll ou au clic, utilisez les Interactions Webflow plutôt que l'autoplay.

4. Contrôlez via les Interactions (optionnel)

Pour déclencher l'animation au scroll ou au hover, créez une Interaction Webflow. Sélectionnez votre élément Lottie comme cible et choisissez l'action Lottie Animation : définissez les frames de début et de fin selon la progression du scroll.

Conclusion

Lottie dans Webflow s'intègre nativement sans code. Pour les animations légères alternatives : faire tourner un élément à l'infini.