Comment penser, orchestrer et optimiser les animations au défilement pour qu'elles renforcent le message plutôt que de le distraire.
a mauvaise animation scroll-driven, c'est celle dont on parle après avoir quitté la page : « tu as vu le truc qui bougeait dans tous les sens ? » La bonne animation, on ne la remarque pas consciemment. On la ressent. Elle guide l'œil, donne du rythme à la lecture, révèle l'information au bon moment.
Le principe de révélation
La majorité de nos animations reposent sur un principe simple : l'information existe déjà, elle n'est pas encore visible. On ne crée pas du mouvement pour le mouvement — on révèle ce qui est là. Un titre masqué qui monte sur l'axe Y. Une image qui se découvre progressivement. Un chiffre qui se compte de zéro à sa valeur finale.
Le mouvement doit servir la hiérarchie, pas la contredire.
Performance : les vrais chiffres
Les animations GPU-accélérées (transform, opacity) sont gratuites en termes de performance — elles ne déclenchent pas de reflow. Les animations qui changent la géométrie (width, height, margin) coûtent cher. La règle : n'animez que transform et opacity, et auditez avec le Performance panel de Chrome avant de shipper.
Règle d'or : si vous ne pouvez pas expliquer en une phrase pourquoi cette animation existe, supprimez-la. L'animation doit toujours être au service de la communication, jamais à son détriment.