GSAP et CSS, animer sans limite
CSS gère les animations simples avec élégance. GSAP prend le relais quand la séquence devient complexe, quand le timing compte vraiment, quand l'animation doit répondre au scroll ou à l'interaction.
Animer sur le web, c'est naviguer entre deux mondes. D'un côté, CSS : rapide à écrire, performant, natif, parfaitement adapté aux transitions d'état et aux animations courtes. De l'autre, JavaScript, et plus précisément GSAP (GreenSock Animation Platform) : précis, puissant, capable d'orchestrer des séquences complexes que CSS ne peut tout simplement pas gérer seul.
La vraie maîtrise de l'animation web, c'est savoir quand utiliser l'un, quand utiliser l'autre, et comment les faire travailler ensemble.
Ce que CSS fait très bien
Les transitions CSS sont imbattables pour les changements d'état simples : hover, focus, apparition d'un élément, changement de couleur. Le navigateur optimise ces animations en les déléguant au GPU quand c'est possible. C'est fluide, c'est performant, c'est sans dépendance.
Avec @keyframes, on peut aller plus loin : des animations en boucle, des effets de rebond, des séquences sur un seul élément. animation-delay permet de décaler plusieurs éléments, animation-fill-mode contrôle l'état final. Pour beaucoup de cas d'usage, CSS suffit largement.
Là où GSAP devient indispensable
GSAP entre en jeu quand la séquence implique plusieurs éléments avec des timings précis, quand l'animation doit réagir à un événement (scroll, clic, entrée dans le viewport), ou quand le contrôle programmatique est nécessaire (pause, reverse, seek à une position).
La force de GSAP tient à deux choses : son moteur de timeline, qui permet d'orchestrer des animations dans le temps avec une précision absolue, et son écosystème de plugins. ScrollTrigger notamment est devenu un standard pour les animations liées au scroll : pinning, scrubbing, déclenchement au viewport.
GSAP ne remplace pas CSS. Il prend le relais là où CSS s'arrête, et les deux ensemble couvrent l'ensemble des besoins d'animation web.
Emmanuel Lechat
La combinaison dans la pratique
Dans un projet typique, CSS gère les micro-interactions (survols, états actifs, transitions de navigation) et GSAP prend en charge les animations d'entrée de page, les effets de scroll, les séquences d'animation des sections hero, les transitions entre pages.
Un exemple concret : l'animation des images dans la galerie des réalisations de ce site. CSS gère le zoom au survol avec transform: scale() et transition. GSAP avec ScrollTrigger gère l'apparition progressive des images au scroll, avec un décalage calculé selon la position dans la grille.
Cette division des responsabilités garde le code lisible et maintenable. Les animations CSS restent dans les fichiers CSS. Les orchestrations complexes restent dans les fichiers JavaScript. Chaque outil fait ce qu'il fait de mieux.
Performance et accessibilité
Deux points souvent négligés sur les animations web. La performance d'abord : toujours privilégier transform et opacity pour les animations, les seules propriétés qui n'entraînent pas de recalcul de layout. GSAP applique cette règle par défaut, CSS laisse cette responsabilité au développeur.
L'accessibilité ensuite : respecter prefers-reduced-motion. Certains utilisateurs sont sensibles aux animations. Une ligne de CSS ou une condition JavaScript suffit à désactiver les effets non essentiels pour ces utilisateurs. C'est une question de respect autant que de bonne pratique.