# Synchronisation

> Découvrez l'art de synchroniser des composants dans PandaSuite. Apprenez à créer des effets innovants grâce à la synchronisation, notamment avec des exemples comme l'effet parallaxe et les barres de progression.

https://docs.pandasuite.com/fr/essentials/components/synchronization/

**Découvrez à quoi sert la synchronisation, comment synchroniser des composants ensemble et des cas d'usage.**

La synchronisation est un concept unique à PandaSuite : vous pouvez synchroniser chaque composant avec un autre composant. Etant donné que chaque fonctionnalité est représentée par un composant, cela vous donne le pouvoir de créer un nombre infini d'effets.

Par exemple, pour réaliser un [effet Parallaxe](https://docs.pandasuite.com/fr/tutorials/how-to/parallax-animations-with-accelerometer/), il faut simplement synchroniser plusieurs **Zones de défilement** (leur position) de taille différente ensemble. Pour créer une [barre de progression](https://docs.pandasuite.com/fr/tutorials/how-to/custom-audio-player-with-progress-bar/) d'un lecteur audio, c'est pareil : c'est la synchronisation d'une **Zone de défilement** (la position) et d'un **Lecteur Audio** (le temps). Pour animer un objet avec le gyroscope, c'est probablement une **Séquence** (les frames) synchronisée avec le **Capteur de mouvement** (angle de rotation).

[Image : Composant Synchronisation d'un décor en parallaxe : zones de défilement Background et Clouds en position horizontale, Birds en verticale]

Cette synchronisation permet de réaliser un effet Parallaxe

Le champ des possibles est infini !

Une synchronisation se créé sous la forme d’un groupe. Créez un groupe de synchronisation incluant les composants de votre choix. Pour chaque composant, choisissez la propriété à synchroniser en fonction de son type : pages, valeurs en "x", valeurs en "y", marqueurs, valeurs de zoom…

Vous pouvez synchroniser plusieurs composants ensemble, il n'y a pas de limite en termes de nombre. Les composants n'ont pas besoin de se situer au même endroit et vous pouvez synchroniser un composant qui se trouve sur l'avant-plan ou sur un autre écran.

Pour créer une synchronisation, insérez le composant **Synchronisation**. C'est un composant non visuel.

[Image : Propriétés d'une synchronisation Tilt : une Animation et un Capteur de mouvement (Horizontal axis) dans le même groupe, encadrés]

Ajoutez deux ou de multiples composants dans votre groupe de synchronisation

Dans les propriétés, cliquez sur **+ Ajouter.** Parcourez votre application et cliquez sur un composant pour le sélectionner. Maintenez la sélection pour ajouter un autre composant.

Choisissez la propriété à synchroniser. Le bouton **Inversé** change l'ordre d'exécution de la propriété.

Pour synchroniser les états d'une [Pop-up](https://docs.pandasuite.com/fr/essentials/components/pop-up/), cliquez sur la pop-up à l'écran. Depuis l'intérieur de la pop-up (double-cliquez dessus), **+ Ajouter** propose directement la pop-up. La synchronisation l'affiche avec une ligne **États**, et ses états suivent la progression comme ceux d'un [Multi-état](https://docs.pandasuite.com/fr/essentials/components/multi-state/).

- Avec un **État par défaut**, la pop-up revient à cet état à chaque ouverture, et les composants synchronisés la suivent. Au chargement de l'écran, ils s'alignent sur cet état.
- Avec **Aucun défaut**, la pop-up s'ouvre sur l'état que la synchronisation lui a donné.

Une app exportée avant l'arrivée de cette possibilité doit être exportée de nouveau pour que la pop-up suive la synchronisation : cela concerne les apps iOS et Android, les paquets de bureau hors ligne et les exports ZIP, SCORM ou CMI5.

Si vous souhaitez synchroniser plusieurs propriétés d’un même composant (par exemple, les positions en “x” et en “y” d’une zone de défilement), il faut créer des composants Synchronisation distincts.

Une Flexbox propose aussi un canal **Épinglage : \[nom de l'élément]** pour chaque élément épinglé, qui suit la progression de cet épinglage de 0 à 100. Voir [Synchroniser une Flexbox](https://docs.pandasuite.com/fr/essentials/components/flexbox/#synchroniser-une-flexbox).