Une animation peut sembler trop sèche, trop lente ou un peu trop enthousiaste sans que l’on sache exactement quel réglage changer. Entre « ça glisse » et « ça rebondit », il manque souvent une référence précise pour discuter du résultat.
Motion Reference propose justement de regarder les mouvements, de les comparer et d’en examiner les paramètres. Ce dictionnaire en ligne rassemble des démonstrations animées, des outils de lecture et des indications d’implémentation. De quoi préparer une transition d’interface ou un effet de texte avec autre chose qu’un vague geste de la main.
Un dictionnaire pour mettre un nom sur les mouvements
Motion Reference est un dictionnaire visuel de motion design : vous partez d’un mouvement, d’une vitesse ou d’une sensation recherchée pour explorer des démonstrations. La présentation du site annonce 782 références couvrant notamment les interfaces, les jeux, le défilement, les formulaires, les gestes et le SVG.
Le catalogue aborde aussi les principes d’animation, les courbes d’accélération, les ressorts, les mouvements de caméra et les transitions. Il ne se limite donc pas à quelques effets décoratifs sur du texte. Pour un développeur front-end ou un designer, l’intérêt est de disposer d’un vocabulaire visuel commun : montrer une référence permet de préciser ce que signifie « plus souple » avant de multiplier les échanges.
Chercher une sensation plutôt qu’un effet au hasard
La recherche et les filtres permettent d’explorer les références selon leur nom, leur sensation, leur usage ou leur vitesse. Le catalogue propose également plusieurs tris, notamment par recommandation, par durée et par nom. L’interface présente des versions japonaise et anglaise.
Pour préparer l’apparition d’un panneau, par exemple, vous pouvez commencer par l’usage recherché, puis comparer les mouvements qui correspondent au caractère de votre interface. Une animation adaptée à un jeu ne donnera pas nécessairement le bon ton à un formulaire administratif. Même les boutons ont parfois besoin de rester sérieux.
Les aperçus de texte acceptent une saisie personnalisée, avec des choix typographiques sans empattements, à empattements ou à chasse fixe. C’est utile pour observer un effet avec un libellé proche du vôtre plutôt qu’avec un texte de démonstration qui ne ressemble pas à votre contenu.
Ralentir et décomposer ce que l’œil perçoit
Les commandes de lecture permettent de lancer toutes les animations, de les mettre en pause ou de ne jouer que la sélection. Des vitesses allant de 0,25× à 2× sont proposées dans les réglages généraux. Ralentir une référence aide à distinguer les étapes qu’une lecture normale fait passer presque inaperçues.
La vue détaillée ajoute une progression temporelle, une lecture image par image et un mode pelure d’oignon. Ce dernier sert à observer les positions successives du mouvement. Des raccourcis permettent aussi de naviguer entre les références, de lancer ou d’arrêter la lecture et d’avancer par étapes.
Certaines démonstrations invitent à agir avec la molette, le pointeur ou un clic. Vous pouvez ainsi examiner des mouvements liés à une interaction, pas seulement regarder une boucle. Pour préparer un comportement déclenché par l’utilisateur, cette distinction mérite votre attention.
Comparer deux réglages sans se fier à sa mémoire
Le laboratoire de comparaison place une version originale A face à une version ajustée B. Il permet de modifier la durée, l’amplitude, le délai et l’easing, puis de relancer la comparaison. L’easing désigne ici la manière dont la vitesse évolue au cours de l’animation.
Un usage concret consiste à garder la même référence et à ne changer qu’un paramètre. Vous pouvez comparer deux durées, puis revenir au réglage initial pour examiner une autre courbe. Cette méthode évite de modifier quatre valeurs à la fois sans savoir laquelle explique la différence observée.
La vue détaillée affiche également une courbe d’easing. Le site précise toutefois que, pour les mouvements comportant plusieurs images clés, cette courbe représente schématiquement l’évolution globale de la vitesse. Il faut donc la lire comme un repère, pas comme la description exhaustive de chaque étape.
Passer de la référence à une première implémentation
Motion Reference ne s’arrête pas aux aperçus. La présentation annonce 228 animations de texte accompagnées de méthodes de réalisation en CSS, GSAP et After Effects. C’est un point intéressant si vous devez discuter d’un même effet entre intégration web et production vidéo.
La zone d’implémentation présente des entrées HTML, CSS, WAAPI, GSAP et React, ainsi que des commandes pour copier le code et enregistrer un fichier HTML de reproduction. Les fiches comportent aussi des indications pour reproduire le mouvement et des repères d’implémentation. Il convient de consulter les formats effectivement proposés pour la référence choisie.
Le site avertit que les valeurs fournies sont des exemples minimaux issus de la démonstration, à adapter à la structure réelle du DOM et aux états d’interaction. Prenez-les comme un point de départ : un effet convaincant sur un élément isolé peut demander des ajustements une fois intégré à votre composant et à ses contenus.
Choisir un mouvement utile et vérifier son contexte
Les fiches prévoient des rubriques sur le déclenchement, les points à observer, les précautions d’usage et les adaptations lorsque l’on souhaite réduire les mouvements. Cela donne un cadre pour réfléchir à l’animation autrement que comme un simple embellissement.
Pour une interface, posez d’abord la question du rôle : le mouvement indique-t-il un changement d’état, accompagne-t-il une action ou attire-t-il seulement le regard ? Vous pouvez ensuite chercher une référence et régler son comportement. Cet ordre de travail évite de construire tout un écran autour d’un rebond choisi parce qu’il était amusant.
Enfin, la présence de conseils sur la réduction des mouvements ne dispense pas de vérifier votre implémentation. Contrôlez les préférences de mouvement réduit, les déclenchements et la lisibilité dans le contexte réel. Le dictionnaire aide à choisir et à expliquer une animation ; la validation reste à faire dans votre interface.
Sources consultées le 13/10/2026 : モーションリファレンス | 動き・イージング辞典.
La discussion