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.