Comment intégrer une animation Lottie dans Webflow ?
Apprenez à intégrer une animation Lottie dans Webflow : upload JSON, autoplay, loop et contrôle via Interactions.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment intégrer une animation Lottie dans Webflow.
| Option | Source | Format |
|---|---|---|
| LottieFiles (bibliothèque) | lottiefiles.com | JSON ou dotLottie |
| Animation custom After Effects | Export via LottieFiles plugin | JSON |
| Bibliothèque Webflow Assets | Upload direct | JSON |
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.
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
