Du CSS aux shaders WebGL : panorama des techniques d'animation en 2023

Parfois subtiles, parfois proéminentes, les animations sont un élément essentiel pour une expérience utilisateur agréable. Mais une fois qu'on a imaginé des animations plus ou moins folles, vient la question fatidique du "comment fait-on ça ?", à laquelle j'aimerais vous aider à répondre.

Pour pouvoir choisir la technique la mieux adaptée à chaque animation, il vaut mieux avoir une boîte à outils la plus complète possible. J'aimerais vous aider à construire la vôtre en vous présentant un panel le plus large possible de techniques d'animation sur le web : des APIs natives classiques (CSS, Web Animation API) aux plus complexes (Canvas API) en passant par les librairies spécialisées (FLIP, Lottie, Framer Motion, Rive...). Nous finirons avec WebGL et ses shaders GLSL, qui feraient trembler plus d'un développeur mais dont on retrouve les effets impressionnants sur tous les sites récompensés aux Awwwards.

Je passerai rapidement sur toutes ces techniques, en comparant leurs performances et utilisations possibles, afin de vous laisser la liberté d'explorer plus en profondeur celles qui vous intéressent.