1. Origine
GSAP (GreenSock Animation Platform) existe depuis 2008. GreenSock a bâti sa réputation sur une promesse simple : des animations fluides, précises et performantes sur n'importe quel navigateur, n'importe quel appareil. Pendant des années, c'est resté l'outil de référence des studios créatifs. Gratuit pour les usages commerciaux standard, mais avec les plugins premium (SplitText, MorphSVG, DrawSVG) réservés aux abonnés Club GSAP.
En décembre 2023, Webflow a acquis GreenSock. Deux conséquences directes : tous les plugins Club GSAP sont devenus gratuits, et GSAP est désormais accessible directement depuis le Designer Webflow. Chez Studio Relief, on continue d'utiliser GSAP via le repository du projet, pour maîtriser les versions et la configuration des plugins.
2. Utilité
Le CSS gère très bien les animations simples : transitions hover, apparitions au chargement, micro-interactions. C'est déclaratif, performant, et ça couvre 80% des besoins d'un site standard. GSAP intervient pour les 20% restants, ceux qui font la différence sur les projets premium.
La différence fondamentale : CSS anime des propriétés isolées, GSAP orchestre des séquences. Dès qu'on a besoin de synchroniser plusieurs éléments dans le temps, de piloter une animation à la position de scroll avec précision, ou d'enchaîner des effets avec des callbacks, CSS atteint ses limites.
GSAP prend le relais : scroll storytelling, révélations progressives synchronisées, animations typographiques, sections épinglées pendant le scroll. Ces effets sont impossibles à reproduire fidèlement avec les outils natifs. Avec GSAP, ils deviennent précis, fluides et maintenables.
3. Fonctionnalités
Le cœur de GSAP, c'est son moteur d'animation : gsap.to(), gsap.from(), gsap.fromTo() pour animer n'importe quelle propriété CSS ou attribut JavaScript, et gsap.timeline() pour orchestrer des séquences complexes avec un contrôle précis sur le temps, les décalages et les callbacks.
C'est sur cette base que s'appuient tous les plugins :
- ScrollTrigger : animations pilotées par la position de scroll (parallaxe, révélations, sections épinglées, scrubbing). Le plugin incontournable sur les projets Webflow créatifs.
- SplitText : animations typographiques lettre par lettre, mot par mot, désormais gratuit
- DrawSVG : tracé animé de chemins SVG, désormais gratuit
- MorphSVG : transformation d'une forme SVG en une autre, désormais gratuit
- Flip : transitions fluides entre deux états DOM (layout animations)
- Observer : détection unifiée de scroll, touch, wheel et pointer pour des interactions hybrides
- MotionPath : animation d'éléments le long d'un chemin SVG
- CustomEase : création d'easings personnalisés via une courbe de Bézier
- Support natif de
prefers-reduced-motionpour l'accessibilité
4. Cas concrets
→ Sur un portfolio créatif, GSAP permet de construire une narration visuelle au scroll : chaque section se dévoile progressivement pendant que l'utilisateur défile, avec des éléments qui entrent en scène à des rythmes différents. Le résultat : une expérience immersive, mémorable, qui distingue immédiatement le site d'un portfolio standard.
→ Sur un site institutionnel, une section clé peut être maintenue à l'écran pendant que des chiffres ou des arguments défilent en séquence au scroll. L'utilisateur progresse dans le contenu sans jamais quitter la section : un format efficace pour raconter une progression, une croissance ou un processus en plusieurs étapes.
5. Prix
GSAP est entièrement gratuit pour tous les usages, y compris commerciaux. Depuis l'acquisition par Webflow en décembre 2023, tous les plugins Club GSAP (SplitText, MorphSVG, DrawSVG, Flip, Observer, MotionPath…) sont désormais disponibles gratuitement, sans abonnement, sans licence.
→ gsap.com
6. Questions fréquentes
GSAP a-t-il un impact sur les performances ?
GSAP optimise automatiquement pour les propriétés GPU-accelerated (transform, opacity) et limite les reflows. Sur les projets bien configurés, GSAP est souvent plus performant que des animations CSS complexes mal optimisées. Il supporte aussi nativement prefers-reduced-motion : les animations se désactivent automatiquement pour les utilisateurs qui ont configuré cette préférence dans leur OS.
GSAP et les interactions Webflow peuvent-ils coexister ?
Oui, à condition de ne pas cibler le même élément avec les deux simultanément. En pratique, on réserve GSAP pour les séquences avancées.
Comment intégrer GSAP dans Webflow ?
Deux approches : nativement via l'éditeur Webflow (désormais disponible sans custom code), ou via un repository public externe pour un contrôle total sur les versions et la configuration des plugins : l'approche que l'on privilégie chez Studio Relief.
