{{text}}
Partager
GSAP, c'est quoi exactement ?
GSAP (GreenSock Animation Platform) est une librairie d'animation JavaScript indépendante de tout framework, capable d'animer aussi bien du CSS, du SVG, du canvas, des objets JavaScript que des composants React ou Vue. En clair, presque tout ce qui est manipulable en JavaScript peut être animé avec GSAP, dans tous les navigateurs modernes.
Ce qui distingue GSAP des animations CSS classiques, c'est le contrôle. La librairie offre un séquençage précis via des timelines, une fiabilité cross-browser éprouvée et des performances élevées. Elle est aujourd'hui utilisée sur plus de 12 millions de sites, ce qui en fait un standard de fait pour les animations web professionnelles.
Concrètement, GSAP sert à créer des effets que les interactions natives d'un éditeur visuel peinent à produire : enchaînements complexes, animations pilotées au scroll, morphing de formes SVG, animations de texte lettre par lettre, ou transitions d'état fluides entre deux mises en page.
Pourquoi GSAP est devenu incontournable (et gratuit) ?
Le contexte a radicalement changé en 2024 et 2025. Webflow a annoncé le rachat de GreenSock, l'éditeur de GSAP, le 15 octobre 2024. L'objectif affiché : renforcer les capacités d'animation de sa plateforme et intégrer GSAP nativement dans Webflow.
La conséquence la plus marquante pour les designers et développeurs est tombée en avril 2025 : GSAP est devenu 100% gratuit, y compris pour un usage commercial, sur tous les types de projets et toutes les plateformes. Les plugins autrefois réservés aux abonnés Club GreenSock sont désormais inclus sans frais.
- ScrollTrigger : animations pilotées par le scroll
- SplitText : animation de texte par lettres, mots ou lignes
- MorphSVG : transformation d'une forme SVG en une autre
- DrawSVG : effet de tracé progressif des contours SVG
- ScrollSmoother : défilement lissé et effets de parallaxe
- Inertia : mouvements avec inertie naturelle
Autrement dit, l'argument financier qui freinait l'adoption de GSAP a disparu.
La librairie reste par ailleurs accessible à tout le web, pas seulement aux clients Webflow, et continue d'être maintenue et enrichie.
ScrollTrigger : le plugin star des animations au scroll
ScrollTrigger est le plugin de GSAP qui déclenche et contrôle des animations en fonction de la position de défilement de l'utilisateur. C'est aujourd'hui la référence pour les expériences narratives où le contenu s'anime au fur et à mesure que l'on descend la page.
Son intérêt tient à la précision du déclenchement. Vous définissez un point de début et un point de fin, et l'animation se joue entre les deux. Plusieurs mécaniques sont possibles :
- Scrub : l'animation se synchronise avec la barre de défilement, en avant comme en arrière
- Pin : une section reste figée à l'écran pendant que l'animation se déroule
- Markers : des repères visuels facilitent le débogage pendant le développement
ScrollTrigger recalcule automatiquement ses points de déclenchement lorsque la fenêtre est redimensionnée, ce qui le rend fiable en responsive. Il permet des effets de parallaxe, du défilement horizontal, l'épinglage de sections, du morphing SVG ou l'intégration d'animations Lottie.
Les principaux plugins GSAP et leurs usages
Au-delà de ScrollTrigger, l'écosystème GSAP couvre la plupart des besoins d'animation avancée. Le tableau ci-dessous résume les plugins les plus utiles et leurs cas d'usage concrets.
GSAP ou interactions natives Webflow : quand utiliser quoi ?
La question n'est pas de choisir un camp, mais d'utiliser le bon outil au bon moment. Pour la majorité des besoins courants, les interactions natives de Webflow suffisent largement : apparitions au scroll, effets de survol, micro-interactions. Elles se créent visuellement, sans écrire de code.
GSAP prend le relais dès que l'animation devient complexe ou très contrôlée : timelines avec de nombreuses étapes synchronisées, scroll fin avec épinglage, morphing SVG, animation de texte avancée ou transitions d'état. Cette logique reste fidèle à l'approche no-code de Webflow : on garde la production visuelle pour le gros du site, et on ajoute du code uniquement là où il crée une vraie valeur. Avec l'intégration native de GSAP en cours dans Webflow, cette frontière va d'ailleurs continuer de s'estomper.
En pratique chez Synqro : pour Qobra (SaaS), qui avait besoin de landing pages ciblées et d'outils interactifs pour générer des leads, nous avons construit ces pages et ces interactions sur Webflow. Résultat : x3 leads et x16 trafic organique. Les animations, bien dosées, font partie de ces leviers d'engagement.
Comment intégrer GSAP sur un site Webflow ?
Tant que l'intégration native n'est pas généralisée, l'ajout de GSAP à un projet Webflow suit une logique simple, à réserver aux pages qui en ont besoin.
- Ajouter la librairie GSAP via son script CDN dans le code personnalisé du site ou de la page concernée.
- Charger uniquement les plugins nécessaires (par exemple ScrollTrigger) pour ne pas alourdir la page.
- Écrire l'animation dans un bloc de code, en ciblant les éléments par leur classe ou leur identifiant.
- Tester le rendu en responsive et activer les markers de ScrollTrigger pour ajuster les déclenchements.
- Désactiver les markers avant la mise en ligne et republier le site.
L'enjeu est de rester sobre : une animation GSAP bien placée renforce le message, une page sur-animée fatigue le visiteur et pèse sur les performances.
Bonnes pratiques pour des animations performantes
Une belle animation ne doit jamais se payer au prix de la vitesse ou de l'accessibilité. Quelques principes garantissent un résultat propre.
- Animer les bonnes propriétés : privilégier transform et opacity, qui n'entraînent pas de recalcul de mise en page, plutôt que top, left ou height.
- Respecter prefers-reduced-motion : couper ou atténuer les animations pour les utilisateurs qui le demandent dans leurs réglages système.
- Ne pas animer le hero en lazy : la première zone visible doit être stable pour préserver le LCP et éviter les décalages de mise en page.
- Doser : une à deux animations fortes par page suffisent. Le reste doit servir la lecture, pas la distraire.
Ces règles rejoignent directement les critères de performance que Google mesure via les Core Web Vitals. Une animation mal gérée dégrade le CLS et la vitesse perçue, deux signaux d'expérience de page à surveiller.
FAQ : questions fréquentes sur GSAP
GSAP est-il vraiment gratuit ?
Oui. Depuis avril 2025, GSAP est 100% gratuit, y compris pour un usage commercial et sur toutes les plateformes. Les plugins autrefois payants du Club GreenSock, comme ScrollTrigger, SplitText ou MorphSVG, sont désormais inclus sans frais. Ce changement fait suite au rachat de GreenSock par Webflow.
À qui appartient GSAP aujourd'hui ?
GSAP appartient à Webflow, qui a racheté GreenSock, la société éditrice, dans une opération annoncée le 15 octobre 2024. Webflow intègre progressivement GSAP nativement dans sa plateforme, tout en maintenant la librairie disponible pour l'ensemble du web, au-delà des seuls projets Webflow.
Faut-il savoir coder pour utiliser GSAP ?
Une base en JavaScript reste utile pour exploiter GSAP à son plein potentiel, car les animations s'écrivent en code. Cela dit, l'intégration native en cours dans Webflow vise précisément à rendre une partie de cette puissance accessible visuellement, sans écrire de code.
Quelle différence entre GSAP et les interactions Webflow ?
Les interactions natives de Webflow se créent visuellement et couvrent la majorité des animations courantes. GSAP s'adresse aux animations avancées : timelines complexes, scroll très contrôlé, morphing SVG ou animation de texte. On combine souvent les deux sur un même projet.
Qu'est-ce que ScrollTrigger ?
ScrollTrigger est le plugin de GSAP dédié aux animations pilotées par le défilement. Il permet de déclencher et de synchroniser une animation avec la position de scroll, d'épingler des sections et de créer des effets de parallaxe ou de storytelling vertical.
GSAP ralentit-il un site ?
Bien utilisé, GSAP est très performant. Le risque vient de l'usage : trop d'animations, des propriétés mal choisies ou des scripts chargés sur toutes les pages. En ciblant les bonnes propriétés et en limitant les effets aux pages utiles, l'impact sur la vitesse reste maîtrisé.
Conclusion
GSAP s'impose en 2026 comme la référence des animations web avancées, d'autant plus depuis qu'il est gratuit et adossé à Webflow. Bien employé, il transforme un site en expérience mémorable, à condition de rester sobre et attentif aux performances. Vous voulez un site Webflow performant et animé avec goût, sans sacrifier la vitesse ni le SEO ? Parlez de votre projet à notre équipe.
La dernière réalisation de Synqro
