Motion Path

De petits cercles ou icônes tournent autour d’un centre sur des orbites circulaires.

Ajoute des « Orbiting Circles » (aussi appelés orbit animation ou orbiting icons) sur [où].
De petits cercles doivent tourner lentement et régulièrement autour d’un élément central sur des anneaux circulaires, l’anneau extérieur tournant dans l’autre sens et plus lentement.
Garde la boucle continue et les éléments en orbite bien droits, et arrête la rotation si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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.

Une impulsion lumineuse parcourt une ligne qui relie deux éléments.

Ajoute un effet « Animated Beam » (aussi appelé connecting beam) sur [où].
Une courte impulsion lumineuse doit parcourir la ligne qui relie deux éléments, en avançant régulièrement d’un bout à l’autre puis en recommençant : fluide et calme.
Garde la ligne de liaison toujours visible, et fige l’impulsion si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Le texte suit un tracé courbe et avance le long de celui-ci au fil du défilement.

Ajoute un effet « Text Path Scroll » (aussi appelé text path curve scroll animation) sur [où].
Le texte doit reposer sur une ligne courbe et glisser le long de celle-ci au défilement, en avançant vers le bas et en reculant vers le haut.
Lie le mouvement directement à la position de défilement, sans latence, et garde le texte lisible comme du texte normal pour les lecteurs d’écran.

Une forme vectorielle se transforme en douceur en une autre.

Ajoute un « Shape Morph » (aussi appelé path morphing ou SVG morph) sur [où].
Une forme doit se transformer en douceur en une autre, par exemple un pentagone qui se resserre en étoile, ses points glissant à leur place à un rythme régulier et posé.
Donne aux deux formes le même nombre de points correspondants pour que la transformation reste nette et sans scintillement, et joue-la une fois par changement d’état plutôt qu’en boucle.

Un filtre SVG déforme du texte ou des formes avec un bruit animé.

Ajoute un effet de survol « SVG Displacement Distortion » (aussi appelé displacement map effect) sur [où].
Pendant le survol, le texte ou la forme doit onduler et trembler comme vu à travers de l’eau en mouvement, avec une apparition douce, puis redevenir net quand le pointeur s’en va.
N’applique le filtre de distorsion que lorsque l’effet est actif pour qu’il ne coûte rien au repos, et montre le même effet au focus clavier.