Stagger

Un titre est découpé en caractères, mots ou lignes qui s’animent l’un après l’autre avec un léger décalage.

Ajoute une entrée « Split Text Stagger » (aussi appelée letter stagger ou staggered text reveal) sur [où].
Découpe le titre en lettres qui montent et apparaissent en fondu l’une après l’autre avec un court délai entre elles, rapide et fluide, sans rebond.
Joue-la une seule fois quand le titre apparaît à l’écran, fais en sorte que les lecteurs d’écran le lisent comme un seul mot, et affiche-le sans mouvement 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.

L’élément monte légèrement tout en apparaissant en fondu, comme s’il se posait à sa place.

Ajoute une animation d’entrée « Fade Up » (aussi appelée fade-in-up ou reveal on scroll) sur [où].
Les éléments doivent monter légèrement en apparaissant en fondu la première fois qu’ils entrent à l’écran au défilement : discret et rapide, sans rebond.
Joue-la une seule fois et supprime le mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une animation se joue une fois quand un élément entre dans le viewport ou en sort.

Ajoute une « Scroll-Triggered Animation » (aussi appelée reveal on scroll ou animate on scroll) sur [où].
Chaque élément doit apparaître en fondu et glisser vers le haut jusqu’à sa place une seule fois en entrant à l’écran, à son propre rythme rapide et fluide plutôt qu’en suivant la position de défilement.
Garde le contenu visible si les scripts ne se chargent pas, et affiche les éléments directement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément tourne et grandit à partir d’un point tout en apparaissant en fondu.

Ajoute une animation d’entrée « Swirl In » (aussi appelée swirl in forward) sur [où].
L’élément doit faire bien plus d’un tour complet en grandissant à partir d’un seul point jusqu’à sa taille normale, tout en apparaissant en fondu : rapide au début, puis ralentissant en se stabilisant.
Joue-la une seule fois sur un seul élément plutôt que sur tout un groupe, et affiche-le à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les lettres commencent très espacées et estompées, puis se resserrent jusqu’à l’espacement normal en apparaissant.

Ajoute une animation de texte « Tracking In » (aussi appelée text tracking in ou letter-spacing in) sur [où].
Les lettres doivent commencer très espacées et pâles, puis se resserrer jusqu’à l’espacement normal en devenant entièrement visibles : fluide, avec un ralentissement à la fin.
Garde le texte centré et sur une seule ligne pendant le changement d’espacement pour que la mise en page autour ne bouge pas, et affiche-le avec l’espacement normal si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

L’élément grandit depuis un état réduit et transparent jusqu’à sa taille normale en apparaissant en fondu.

Ajoute une animation d’entrée « Zoom In » (aussi appelée scale in) sur [où].
L’élément doit passer de petit et transparent à sa taille normale en apparaissant en fondu : rapide et fluide, sans dépassement.
Mets-le à l’échelle depuis son centre sans affecter la mise en page autour, et affiche-le à sa place sans mouvement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).