Swipe to Delete

Un élément suit le pointeur quand on le fait glisser et peut être limité à une zone ou à un axe.

Ajoute une interaction « Drag » (aussi appelée draggable ou drag constraints) sur [où].
L’élément doit suivre directement le pointeur pendant qu’on le fait glisser, s’arrêter aux bords de sa zone autorisée et revenir à sa position de repos avec un petit rebond quand on le relâche.
Fais-le fonctionner au toucher comme à la souris sans que la page défile en dessous, et propose un moyen de le déplacer au clavier.

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.

Des cartes s’empilent avec de légers décalages et celle du dessus s’écarte pour révéler la suivante.

Ajoute un « Card Stack » (aussi appelé stacked cards) sur [où].
Empile les cartes avec de légers décalages l’une derrière l’autre ; chaque appui doit faire pivoter la carte du dessus sur le côté et la glisser à l’arrière, pendant que les autres avancent : fluide, léger et vif.
Rends-le utilisable au clavier, laisse les lecteurs d’écran atteindre chaque carte dans l’ordre et utilise un simple fondu si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un bouton rond glisse le long d’un rail dont la couleur change entre désactivé et activé.

Ajoute une animation d’interrupteur (Toggle Switch) (aussi appelé switch) sur [où].
À l’activation ou à la désactivation, le bouton rond doit glisser en douceur jusqu’à l’autre bout du rail pendant que la couleur du rail change : rapide et net, sans rebond.
Fais-en un vrai interrupteur accessible (role="switch" avec son état checked) qui fonctionne aussi au clavier.

L’image du produit rétrécit et s’envole en arc de cercle jusqu’à l’icône du panier.

Ajoute une animation « Add to Cart Fly » (aussi appelée fly to cart ou add-to-cart animation) sur [où].
Quand on appuie sur le bouton d’ajout, une petite copie de l’image du produit doit rétrécir en volant selon un arc fluide et rapide jusqu’à l’icône du panier, et le panier doit faire un petit sursaut pendant que son compteur se met à jour.
Joue-la une fois par appui sans déplacer la carte produit d’origine, et supprime le vol si l’utilisateur a activé la réduction des animations (prefers-reduced-motion), tout en mettant quand même le panier à jour.

Quand on coche la case, une coche se dessine trait par trait à l’intérieur.

Ajoute une animation « Checkbox Check Draw » (aussi appelée animated checkbox ou checkmark draw) sur [où].
Quand on coche la case, elle doit se remplir de couleur et la coche doit se dessiner d’un seul trait rapide et fluide ; quand on la décoche, elle s’efface de la même façon.
Garde une vraie case à cocher avec son état coché, utilisable au clavier et avec un anneau de focus visible.