# Lottie > Affichez des animations Lottie dans votre application avec PandaSuite. Créez des marqueurs, interagissez et synchronisez votre animation avec d'autres composants pour une expérience enrichie. Apprenez à intégrer, personnaliser et déclencher des actions à partir de vos animations Lottie. https://docs.pandasuite.com/fr/essentials/components/lottie/ **Affichez n'importe quelle animation Lottie dans votre application.** Créez des marqueurs, interagissez et synchronisez votre animation avec les autres composants (défilement, mouvement...). Développée par les équipes Airbnb, [Lottie](https://lottiefiles.com/) est une librairie open source iOS, Android et React Native qui génère les animations en temps réel, ce qui permet aux applications d’utiliser des animations aussi facilement qu’elles utilisent des images statiques. Ces animations SVG sont plus fluides, plus légères et offrent plus de contrôle. Pour en savoir plus : [Lottie : des animations plus fluides pour votre application](https://blog.pandasuite.com/fr/lottie-bodymovin-des-animations-pour-votre-app/) ## Créer une animation Lottie Le site de [Lottie](https://lottiefiles.com/featured) regroupe de très nombreuses animations que vous pouvez utiliser et personnaliser. [Vidéo : Page d'accueil de LottieFiles : les animations gratuites à la une sont listées et le curseur en survole une pour la sélectionner] Sélectionnez votre animation sur le site de Lottie. Pour télécharger une animation Lottie : - Rendez-vous sur [lottiefiles.com](https://lottiefiles.com/) et sélectionnez votre animation. - Pour afficher une animation Lottie dans PandaSuite, vous avez besoin du fichier JSON. - Cliquez sur le bouton **Download** et sélectionnez **Lottie JSON**. - Une fois ce fichier téléchargé, compressez-le au format ZIP. [Vidéo : L'animation Yoga Se Hi hoga en lecture sur LottieFiles : une femme médite en position du lotus, entourée d'orbites vertes] > **Info** > > Si vous souhaitez uniquement afficher l'animation en utilisant une connexion Internet, vous pouvez utiliser l'URL de l'animation dans un composant [Web](https://docs.pandasuite.com/fr/essentials/components/web/). Utilisez l'URL au sein du bloc **iFrame code**. Vous pouvez également exporter une animation réalisée dans After Effects ou Figma grâce aux plugins [After Effects](https://lottiefiles.com/plugins/after-effects) ou [Figma](https://lottiefiles.com/plugins/figma). ## Intégrer dans votre projet Pour insérer votre animation Lottie dans votre application : - Cliquez sur **Composants** et insérez le composant **Animation Lottie**. - Comme **Source**, sélectionnez le fichier ZIP de votre animation. - Indiquez le nom du fichier JSON (par exemple *43792-yoga-se-hi-hoga.json*) - Double-cliquez sur le composant pour l'afficher [Image : Composant Animation Lottie sur un écran de yoga, avec Source ZIP, nom du fichier JSON, En boucle, Lecture automatique et Vitesse] Le composant Animation Lottie. Vous pouvez jouer l'animation depuis la fenêtre d'édition. Personnalisez l'animation avec les propriétés suivantes : **En boucle**, **Vitesse (min/max)** et **Lecture automatique**. Par défaut, l'animation s'appuie sur la web view, ce qui permet une plus grande compatibilité. Vous pouvez choisir d'utiliser la version native iOS et/ou Android pour une meilleure performance, mais attention à la compatibilité des appareils. ## Ajouter des marqueurs Vous pouvez identifier une ou plusieurs frames de votre animation qui vont vous servir de déclencheur ou d'objet d'une action. Pour ajouter un marqueur sur votre animation Lottie : - Double-cliquez sur le composant - Dans la fenêtre d'édition de votre marqueur, cliquez sur le bouton + - Jouez votre animation et arrêtez-la sur la frame de votre choix. [Image : Fenêtre d'édition Lottie d'une abeille : lecture arrêtée à l'image 67 sur 90, où le marqueur Landing est créé avec le bouton +] Créez des marqueurs depuis la fenêtre édition. Vous pouvez changer le nom de votre marqueur, modifier manuellement la frame. Ce marqueur apparaît ensuite dans la liste des déclencheurs et des actions de votre animation Lottie. ## Déclencher une action à partir de votre animation Lottie Sélectionnez votre composant et ajoutez une nouvelle action. Voici les [déclencheurs](https://docs.pandasuite.com/fr/essentials/interactions/triggers/) disponibles : - **Fin de lecture** - **Mise en pause** - **Commence lecture** - **Arrêt lecture** [Image : Déclencheurs de l'animation Lottie de l'abeille : le marqueur Frame 67 - Landing, puis Commence lecture, Pause, Arrêt et Fin lecture] Les déclencheurs du composant Lottie Animation. ## Créer une action sur votre animation Choisissez un objet, le déclencheur et l'action **Agir sur un composant**. Voici les actions disponibles : - **Changer frame** - **Lecture/Pause** - **Lecture** - **Mettre en pause** - **Arrêter** - **Seek** - **Avancer** et **Reculer** - **Redémarrer au début** - **Mettre la vitesse** - **Augmenter la vitesse** et **Diminuer la vitesse** [Image : Agir sur un composant sur l'animation Lottie de l'abeille : ses actions, de Change frame à Rewind, encadrées] Les actions du composant Animation Lottie. ### Synchroniser avec un autre composant Pour synchroniser votre animation Lottie avec un autre composant (par exemple le capteur de mouvement), insérez le composant **Synchronisation** depuis **Composants**. Dans la fenêtre **Propriétés**, cliquez sur **Ajouter composant**. Choisissez le composant Animation Lottie et l'autre composant dans la liste. Sélectionnez le composant Animation Lottie et cliquez sur **Frames** dans les options.