GSAP : animations gratuites, ScrollTrigger et intégration Webflow

GSAP, c'est quoi ?

GSAP est une librairie d'animation JavaScript indépendante de tout framework. Elle anime des propriétés CSS, des SVG, du canvas, des objets JavaScript, et fonctionne aussi bien sur un site Webflow que dans une application React ou Vue.

Son principe tient en deux briques. Un tween anime un élément d'un état à un autre (position, opacité, échelle). Une timeline enchaîne plusieurs tweens avec un minutage précis, que l'on peut mettre en pause, inverser ou synchroniser avec le scroll.

On l'utilise pour ce que les animations CSS gèrent mal : enchaînements longs, animations pilotées au scroll, morphing de formes SVG, texte animé lettre par lettre, transitions fluides entre deux mises en page.

GSAP est-il gratuit ? La licence en 2026

Oui. Webflow a annoncé le rachat de GreenSock, l'éditeur de GSAP, le 15 octobre 2024. Quelques mois plus tard, la librairie est devenue gratuite pour tout le monde, pas seulement pour les clients Webflow.

La licence standard de GSAP (en vigueur depuis le 30 avril 2025, mise à jour le 30 mai 2025) couvre l'usage commercial sans frais, y compris les plugins autrefois réservés au Club GreenSock comme SplitText ou MorphSVG. Une seule restriction notable : vous ne pouvez pas intégrer GSAP dans un outil de création d'animations visuelles sans code qui concurrence celui de Webflow. Pour un site, une app ou une campagne, rien ne change.

Les plugins les plus utilisés, tous inclus :

• ScrollTrigger : animations pilotées par le scroll.
• SplitText : découpe d'un texte en lettres, mots ou lignes pour les animer.
• MorphSVG : transformation d'une forme SVG en une autre.
• DrawSVG : tracé progressif des contours d'un SVG.
• ScrollSmoother : défilement lissé et effets de parallaxe.
• Flip, Draggable, Inertia, MotionPath : changements de mise en page, glisser-déposer, inertie, déplacement le long d'un tracé.

Hors Webflow, l'installation se fait avec npm install gsap, et la documentation d'installation officielle précise que tous les plugins sont désormais disponibles librement sur npm.

GSAP dans Webflow : avec ou sans code

Depuis le rachat, Webflow a intégré GSAP à deux niveaux. Le choix dépend de qui maintient le site et du degré de contrôle recherché.

Sans code : les Interactions with GSAP

Lancées le 10 juillet 2025, les Interactions with GSAP reconstruisent le panneau d'interactions de Webflow sur le moteur GSAP, pour tous les utilisateurs et sans surcoût. On y trouve une timeline horizontale, SplitText, les staggers (décalages en cascade), ScrollTrigger, des réglages de scroll plus fins et la réutilisation d'une interaction sur tout le site.

Selon l'aide Webflow mise à jour en septembre 2026, c'est la version recommandée et celle activée par défaut sur tous les nouveaux sites. Les Classic Interactions restent disponibles, et les deux peuvent cohabiter, mais chaque version charge ses propres ressources : mieux vaut n'en garder qu'une pour la performance.

Avec du code : l'intégration GSAP du site

Pour écrire vos propres animations, inutile d'ajouter un script CDN à la main. La procédure décrite dans l'article d'aide « Use GSAP in Webflow » est la suivante :

1. Ouvrir les réglages du site, rubrique GSAP integration, et activer la bibliothèque GSAP.
2. Cocher uniquement les plugins utiles (ScrollTrigger, SplitText...). Webflow les héberge et les enregistre automatiquement.
3. Écrire l'animation dans les réglages de la page (Custom code, avant la balise </body>) ou dans un composant Embed, dans un écouteur DOMContentLoaded pour que les éléments soient chargés.
4. Prévisualiser : Webflow affiche désormais le code personnalisé en preview, avant publication. Activer markers: true sur ScrollTrigger pour caler les déclenchements.
5. Retirer les markers, tester sur mobile, puis publier.

Exemple minimal, pour faire apparaître un titre : gsap.from(".hero_title", { y: 40, opacity: 0, duration: 0.8 }). Notez que le support Webflow n'assiste pas sur le code personnalisé : les questions passent par la communauté.

ScrollTrigger : animer au scroll

ScrollTrigger est le plugin GSAP qui déclenche et contrôle une animation selon la position de défilement. Vous définissez un point de départ et un point d'arrivée, et l'animation se joue entre les deux.

• Scrub : l'animation suit 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 : repères visuels pour régler les déclenchements pendant le développement.

ScrollTrigger recalcule ses points de déclenchement quand la fenêtre change de taille, ce qui le rend fiable en responsive. Cas d'usage courants : parallaxe, défilement horizontal, sections épinglées, récit vertical.

Les plugins GSAP et leurs usages

GSAP ou interactions natives : quand utiliser quoi ?

Pour la majorité des besoins, les interactions natives de Webflow suffisent : apparitions au scroll, survols, micro-interactions, titres découpés. Depuis qu'elles tournent sur GSAP, l'écart avec le code s'est réduit.

Le code reste utile quand l'animation dépend d'une logique : état d'une application, données, conditions, morphing SVG ou transitions Flip. On garde alors la production visuelle pour le gros du site, et on ajoute du code là où il apporte quelque chose.

Chez Synqro, agence Webflow Premium Partner récompensée de trois mentions honorables Awwwards, nous réservons les animations fortes aux moments qui portent le message (arrivée sur la page, preuve, appel à l'action) et laissons le reste sobre. Pour Qobra, nous avons construit sur Webflow des landing pages et des outils interactifs : le résultat documenté est de trois fois plus de leads et seize fois plus de trafic organique. L'animation y accompagne le contenu, elle ne le remplace pas.

Animations GSAP rapides et accessibles : les règles

• Animer les bonnes propriétés : transform et opacity, qui n'entraînent pas de recalcul de mise en page, plutôt que top, left, width ou height.
• Respecter prefers-reduced-motion : couper ou atténuer les animations pour les personnes qui le demandent. En code, gsap.matchMedia() le gère proprement. Dans Webflow, les Interactions with GSAP ont un réglage dédié au mouvement réduit.
• Ne pas masquer le contenu principal au chargement : un titre ou une image hero qui part d'une opacité nulle retarde l'affichage du plus grand élément visible (LCP).
• Charger GSAP seulement où il sert : plugins cochés au strict nécessaire, scripts sur les pages concernées.
• Doser : une ou deux animations marquantes par page. Le reste doit servir la lecture.

Ces règles rejoignent les Core Web Vitals (LCP, CLS, INP) et les bases de l'accessibilité web. Une animation mal placée dégrade les deux.

En résumé

GSAP est gratuit, appartient à Webflow et se pilote désormais sans code depuis le panneau d'interactions. Commencez par les Interactions with GSAP, passez au code quand la logique l'exige, et gardez un œil sur la performance. Un projet Webflow animé qui doit rester rapide et bien référencé ? Parlez-en à notre équipe.