Drawer Slide

Un panneau glisse depuis le bord inférieur, souvent déplaçable et aimanté à certaines hauteurs.

Ajoute un « Bottom Sheet Slide-Up » (aussi appelé bottom drawer ou sheet) sur [où].
Le panneau doit monter depuis le bord inférieur pendant que la page derrière s’assombrit, en ralentissant doucement jusqu’à sa place, sans rebond.
Joue-le une fois à chaque ouverture, fais-le redescendre à la fermeture, et garde le focus clavier dans le panneau tant qu’il est ouvert.

L’élément glisse depuis l’extérieur du bord de son conteneur jusqu’à sa position de repos, sans fondu.

Ajoute une animation d’entrée « Slide In » (aussi appelée slide in left, slide in right, slide in up ou slide in down) sur [où].
L’élément doit glisser depuis l’extérieur du bord de son conteneur jusqu’à sa place, entièrement opaque du début à la fin : rapide, avec une décélération douce et sans rebond.
Rogne-le au bord du conteneur pour qu’il ne chevauche pas ses voisins et ne crée pas de barres de défilement tant qu’il est dehors, et affiche-le directement à sa place si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

La nouvelle page glisse d’un côté pendant que l’ancienne sort, la direction suivant la profondeur de navigation.

Ajoute une « Slide Page Transition » (aussi appelée push / pop ou directional slide) sur [où].
En avançant, la nouvelle page doit entrer en poussant depuis le côté pendant que l’ancienne sort de l’autre ; en revenant, les deux doivent aller dans le sens inverse : fluide, avec une accélération et une décélération douces.
Lie la direction à la profondeur de navigation, y compris le bouton Retour du navigateur, et empêche la page de défiler latéralement pendant le glissement.

Un calque sombre translucide apparaît en fondu derrière une surcouche pour assombrir la page.

Ajoute un « Backdrop Scrim Fade » (aussi appelé overlay fade ou scrim) sur [où].
À l’ouverture de la surcouche, un calque sombre translucide doit apparaître doucement en fondu sur la page derrière, un peu plus lentement que la surcouche elle-même, puis disparaître à la fermeture.
Garde le scrim sombre en thème clair comme en thème sombre, et empêche la page derrière de défiler ou de recevoir des clics tant qu’il est affiché.

Après un changement de mise en page, les éléments glissent en douceur vers leurs nouvelles positions et tailles.

Ajoute une « FLIP Layout Animation » (aussi appelée layout animation ou First-Last-Invert-Play) sur [où].
Quand la mise en page change, chaque élément doit glisser de son ancienne position vers la nouvelle au lieu de sauter, vite au début puis en se posant en douceur.
Anime uniquement avec des transforms pour que la page ne recalcule pas sa mise en page à chaque image, et passe directement à la nouvelle mise en page si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les éléments apparaissent en fondu et en glissant quand on les ajoute, et s’animent en sortant quand on les retire, pendant que les voisins comblent l’espace.

Ajoute une animation « List Item Enter/Exit » (aussi appelée animated list) sur [où].
Un nouvel élément doit d’abord ouvrir sa place, puis apparaître en fondu en glissant ; un élément retiré doit d’abord disparaître en fondu, puis se replier pour que ses voisins comblent l’espace en douceur.
Garde un élément retiré en place jusqu’à la fin de sa sortie, pour que la liste ne saute jamais quand on ajoute ou retire des éléments.

Une ligne de contenu défile latéralement en boucle infinie, sans coupure.

Ajoute un texte défilant (Marquee) sur [où] : une bande qui défile horizontalement à l’infini, aussi appelée ticker.
Le contenu doit défiler de droite à gauche à une vitesse lente et régulière, en boucle continue sans saut visible.
Mets-le en pause au survol et arrête le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).