La différence entre une bonne animation et une excellente animation

• L’animation est un élément clé qui détermine la qualité d’une UI : elle ne se limite pas à l’esthétique, elle apporte aussi une sensation de naturel et des interactions plus intuitives
• Pour créer d’excellentes animations, il est indispensable de maîtriser la prise en compte du point d’origine, le choix du bon easing, l’usage des effets de ressort et une compréhension approfondie des outils
• Par rapport aux fonctions d’easing CSS de base, des courbes d’easing personnalisées peuvent transmettre une immersion et une énergie plus fortes
• Avec le hook useSpring de Framer Motion, les interactions basées sur la position de la souris paraissent plus réalistes et plus fluides
• Plus la compréhension des propriétés CSS est poussée, plus il est possible d’implémenter de nouvelles animations de manière créative ou d’améliorer les animations existantes

---

Animations tenant compte du point d’origine

• Pour un menu déroulant qui s’ouvre au clic sur un bouton, un mouvement qui démarre depuis la position du bouton paraît plus naturel
• Au lieu de la valeur par défaut transform-origin: center, il est visuellement plus naturel de définir bottom center
• Avec Radix ou shadcn/ui, cela peut être géré automatiquement

  .radix-dropdown {  
    transform-origin: var(--radix-popover-content-transform-origin);  
  }  
  

Utiliser le bon easing

• ease-in-out offre dans la plupart des cas une courbe d’accélération et de décélération plus naturelle que ease-in
• En particulier lorsque un élément déjà présent à l’écran se déplace, il est important d’avoir un mouvement réaliste qui démarre et s’arrête comme une voiture
• La recommandation par défaut est ease-out, avec plus de détails disponibles via un lien séparé

Utiliser des courbes d’easing personnalisées

• Les easing CSS de base (ease-in, ease-out) manquent d’expressivité, ce qui affaiblit la sensation produite
• ease convient pour des effets simples comme un hover, mais la plupart des mouvements nécessitent un easing personnalisé
• Ressources recommandées :
  • easing.dev
  • easings.co

Interactions basées sur un ressort

• Si un élément réagit immédiatement à la position de la souris, cela peut donner une impression artificielle
• En utilisant useSpring de Framer Motion, les variations de valeur sont appliquées progressivement, comme avec un ressort, ce qui produit des mouvements plus réalistes et plus fluides
• C’est particulièrement efficace pour des animations purement décoratives, avec des exceptions possibles pour les UI fonctionnelles

Comprendre ses outils

• Exemple : lors d’un changement d’onglet, la couleur du texte et la barre de surbrillance doivent évoluer ensemble de façon naturelle
• Pour cela, il faut exploiter correctement clip-path et d’autres techniques afin d’éviter une animation maladroite
• L’inspection image par image ou la lecture au ralenti permettent d’identifier des différences subtiles
• Les transformations CSS 3D permettent aussi des implémentations créatives comme des effets d’orbite ou des animations de chargement 3D

Pourquoi est-ce important ?

• Aujourd’hui, la plupart des logiciels sont déjà suffisamment bons sur le plan fonctionnel
• Pour offrir une expérience différenciante, une UI agréable à utiliser — et donc l’animation — est indispensable
• Comprendre quand, comment et pourquoi appliquer des animations influence fortement la qualité d’un produit
• Pour aller plus loin, consultez le cours Animations on the Web

[rhrnakrnakr]

Le titre et le contenu ne correspondent pas. Je me suis fait avoir.

[ndrgrd]

J’aime bien les animations, mais il y a trop de pages où elles attirent tellement l’attention qu’elles prennent le pas sur le contenu.

Et surtout, quand elles finissent par casser le rythme de lecture, ça m’agace avant même que j’aie commencé à lire.