# Créer des effets avec les masques

> Découvrez comment utiliser des masques pour créer des effets visuels dynamiques et des transitions fluides.

https://docs.pandasuite.com/fr/essentials/interactions/create-effects-with-masks/

**Les masques vous permettent de créer des effets visuels dynamiques et des transitions fluides pour vos images et contenus interactifs.**

## Qu’est-ce qu’un masque ?

Un masque agit comme une fenêtre qui contrôle quelle partie d’une image est visible. Contrairement au recadrage, le contenu derrière le masque peut être animé et révélé progressivement.

Pour apprendre à créer un masque, rendez-vous dans notre article sur les [Images](https://docs.pandasuite.com/fr/essentials/design/images/).

## Effets et animations de masque

En combinant les masques et les [états](https://docs.pandasuite.com/fr/essentials/interactions/understand-states/), vous avez le pouvoir de réaliser de nombreux effets.

La variété des effets vient du fait que vous pouvez jouer sur la taille du masque (expand, crop...) ou sur la taille de l'image derrière (zoom in...)

### Effet d’agrandissement dynamique (Expand)

📌 Principe : l’image semble s’agrandir progressivement, en jouant sur la taille du masque.

[Vidéo : Cinq tableaux en bandes verticales sur tablette : le deuxième s'élargit pour dévoiler La Liberté guidant le peuple, puis se referme]

Cas d'usage :

- Un panneau qui s’ouvre lorsqu’on clique
- Une carte interactive qui s’étend au survol
- Un menu éventail à la Louvrissime

#### Comment réaliser cet effet d'agrandissement dynamique (expand) ?

1. Définissez un masque initialement petit
2. Créez un nouvel état lié au premier état
3. Dans cet état, étendez la taille du masque
4. Ajoutez une action pour passer d'un état à l'autre et qu’il révèle plus de contenu progressivement
5. Utilisez la **Durée** pour affiner l'animation

### Effet de zoom / dezoom (zoom in / zoom out)

📌 Principe : créer un effet d'animation en jouant sur la taille de l'image.

[Vidéo : Application mobile « Explorez nos histoires » : chaque image grossit légèrement dans son cadre au survol du curseur]

Cas d'usage :

- Une image qui zoom lentement pour révéler un détail
- Un bouton interactif (hover) qui s’agrandit au survol avant de revenir à sa taille initiale

#### Comment réaliser cet effet de zoom in-out ?

1. Pour cet effet, utilisez un composant Multi-état
2. Définissez un masque masque
3. Créez un nouvel état lié au premier état
4. Dans cet état, augmentez la taille de l'image derrière le masque (pour un effet de zoom in). Diminuez la taille pour un effet de zoom out.
5. Ajoutez une action pour passer d'un état à l'autre et qu’il révèle plus de contenu progressivement
6. Utilisez la **Durée** pour affiner l'animation

### Effet de révélation progressive

📌 Principe : faites apparaître progressivement un élément en jouant sur la position ou la taille du masque.

[Vidéo : Le titre « This a beautiful team » se dévoile de gauche à droite au-dessus des portraits de trois membres d'une équipe]

Cas d'usage :

- Un texte qui se dévoile ligne par ligne
- Une image qui apparaît de bas en haut comme un rideau qui se lève

#### Comment réaliser cet effet de révélation progressive ?

1. Créez un masque et placez l’image/texte en dehors de sa zone visible
2. Créez un nouvel état lié au premier état
3. Dans cet état, étendez la taille du masque pour faire apparaître tout le contenu
4. Ajoutez une action pour passer d'un état à l'autre et qu’il révèle plus de contenu progressivement
5. Utilisez la **Durée** pour affiner l'animation

### Effet de découpe animée

📌 Principe : Faire apparaître une image ou un texte à travers une forme animée.

[Vidéo : Page sur la joaillerie, sur tablette : trois photos de femmes glissent dans des cadres carrés fixes, sous des triangles colorés]

Cas d'usage :

- Un titre qui apparaît en étant “découpé” par une forme circulaire
- Une image qui se révèle progressivement à travers un contour en mouvement

#### Comment réaliser cet effet de découpe animée ?

1. Créez un masque et placez l’image à sa position initiale
2. Créez un nouvel état lié au premier état
3. Dans cet état, déplacez l'image sans toucher au masque
4. Ajoutez une action pour passer d'un état à l'autre et qu’il révèle plus de contenu progressivement
5. Utilisez la **Durée** pour affiner l'animation