Outil design
Comment on anime nos interfaces avec GSAP
Toutes les animations de ce site sont écrites avec GSAP : les apparitions au scroll, les titres qui se déplient, les transitions entre sections. On l’utilise parce qu’il permet de contrôler précisément un mouvement, donc de savoir s’arrêter avant l’effet de trop.
Le mouvement au service de la lecture
Une animation utile guide l’attention : elle indique qu’une section commence, qu’un élément répond à une action, ou qu’une information mérite un regard. Maëli définit ces intentions au moment du design, avant que quiconque écrive une ligne de code.
À l’inverse, une page où tout bouge fatigue vite et retarde la lecture. On garde le mouvement pour les endroits où il ajoute quelque chose.
Découvrir notre approche du designLe scroll comme fil conducteur
Avec ScrollTrigger, une animation peut se déclencher au bon moment plutôt qu’au chargement. Les éléments apparaissent quand ils entrent réellement dans le champ du visiteur, ce qui donne un rythme à la page sans imposer d’attente au démarrage.
Ces séquences sont réglées élément par élément : durée, décalage, courbe d’accélération. C’est ce niveau de détail qui sépare une transition agréable d’un effet approximatif.
- Apparitions liées à la position dans la page
- Séquences de titres et de blocs de texte
- Micro-interactions sur les éléments cliquables
- Transitions entre sections
- Réglage fin des durées et des courbes
Animer sans casser la performance ni l’accessibilité
On privilégie les propriétés que le navigateur sait animer efficacement, comme l’opacité et les transformations, et on évite les effets qui obligent la page à recalculer sa mise en page en continu.
On respecte aussi la préférence système de réduction des animations : un visiteur qui a demandé moins de mouvement doit obtenir la même page, simplement plus calme. Et le contenu reste lisible même si une animation ne se joue pas.
Nos contrôles de performanceQuestions fréquentes
Les questions qu’on nous pose le plus souvent, avec des réponses honnêtes plutôt que rassurantes.
Les animations ralentissent-elles le site ?
Pas si elles sont écrites correctement. En animant l’opacité et les transformations plutôt que la mise en page, l’effet reste fluide. Le vrai risque est l’excès : trop d’animations simultanées coûtent plus cher que l’outil lui-même.
Le contenu reste-t-il accessible si les animations sont désactivées ?
Oui. Le contenu est présent dans la page indépendamment des animations, et nous respectons la préférence système de réduction des animations. Le site reste utilisable, il bouge simplement moins.
Faut-il des animations sur tous les projets ?
Non. Sur certains sites, un peu de mouvement à l’entrée des sections suffit largement. On décide au design ce que l’animation doit apporter, plutôt que d’en ajouter par réflexe.