Gooey Effect

Une forme organique modifie son contour en continu.

Ajoute une animation en boucle « Blob Morph » (aussi appelée morphing blob ou animated blob) sur [où].
Une forme organique doit changer lentement de contour sans arrêt tout en tournant doucement : fluide et souple, sans angles vifs.
Rends la boucle continue pour que la forme ne saute jamais, et garde-la immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un mot se floute et se fond dans le suivant au même endroit.

Ajoute un effet « Morphing Text » (aussi appelé text morph) sur [où].
Un mot doit se flouter et fondre dans le suivant au même endroit, avec une fusion douce et gluante, puis rester immobile un instant avant le changement suivant.
Fais défiler les mots sans coupure, laisse les lecteurs d’écran lire les mots comme du texte normal et arrête le cycle si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une icône, comme le menu hamburger, se transforme en une autre (X) grâce à des barres qui pivotent et se déplacent.

Ajoute un « Icon Morph » (aussi appelé hamburger to X ou menu icon morph) sur [où].
À chaque appui, les barres du haut et du bas doivent d’abord glisser ensemble vers le milieu puis pivoter pour former un X pendant que la barre centrale disparaît en fondu ; un nouvel appui inverse le tout : rapide et vif.
Fais-en un vrai bouton bascule dont le libellé accessible et l’état déplié changent avec lui, et garde la taille de l’icône fixe pour que rien ne bouge autour.

Un tracé SVG semble se dessiner le long de son chemin grâce à l’animation du décalage des tirets.

Ajoute une animation « Line Drawing » (aussi appelée path drawing ou self-drawing SVG) sur [où].
Chaque trait doit sembler se dessiner tout seul, en douceur, le long de son chemin du début à la fin, et un second trait, comme une coche, suit juste après le premier.
Joue-la une seule fois à l’entrée à l’écran plutôt qu’en boucle, et affiche les lignes entièrement tracées si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un élément parcourt un chemin courbe personnalisé et peut pivoter pour le suivre.

Ajoute une animation « Motion Path » (aussi appelée animate along path) sur [où].
Un petit élément doit parcourir un itinéraire courbe personnalisé à un rythme lent et régulier, en pivotant pour faire face à sa direction de déplacement.
Utilise un itinéraire fermé pour que la boucle se répète sans saut, et fais en sorte que l’itinéraire s’adapte à son conteneur au lieu de garder une taille fixe.