FLIP Layout Animation

Un élément semble se déplacer et se redimensionner vers un élément correspondant à un nouvel endroit, comme s’il n’en formait qu’un.

Ajoute une « Shared Layout Animation » (aussi appelée shared element dans la page) sur [où].
Quand la sélection change, l’élément doit sembler se déplacer et se redimensionner en douceur de son ancienne place vers la nouvelle, en s’y posant délicatement, pour être perçu comme un seul objet et non deux.
N’affiche qu’une seule copie à tout moment et empêche la mise en page autour de sauter pendant le mouvement.

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.

Quand on applique un filtre ou un tri, les tuiles de la grille se réorganisent, disparaissent en fondu ou glissent vers de nouveaux emplacements.

Ajoute un effet « Masonry / Grid Shuffle » (aussi appelé filterable grid animation) sur [où].
Quand un filtre est appliqué, les tuiles qui ne correspondent plus doivent rétrécir et disparaître en fondu sur place, pendant que les autres glissent en douceur vers leurs nouveaux emplacements ; retirer le filtre joue l’inverse.
Empêche la page autour de sauter pendant que la hauteur de la grille change, et fais des contrôles de filtre de vrais boutons qui indiquent le filtre sélectionné.

Quand on fait glisser un élément, les autres s’écartent et se replacent dans le nouvel ordre.

Ajoute une « Drag-to-Reorder List » (aussi appelée sortable list) sur [où].
L’élément déplacé doit suivre directement le pointeur et se soulever légèrement, pendant que les autres s’écartent en douceur ; au relâchement, il doit se caler rapidement dans l’emplacement le plus proche.
Prends en charge le tactile comme la souris, et propose un moyen de déplacer les éléments au clavier, avec la nouvelle position annoncée aux lecteurs d’écran.

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).