Interactions Webflow GSAP : ce qui change en pratique

Webflow a racheté GreenSock, l'éditeur de GSAP, et en a fait le moteur natif de ses interactions. Pour les équipes qui produisent des sites en no-code, c'est le plus gros changement de l'outil depuis des années : des animations de niveau studio se construisent désormais dans le Designer, sans JavaScript. Voici ce qui change, et comment arbitrer sur un site existant.

GSAP rejoint Webflow : ce que ce rachat change concrètement

GSAP (GreenSock Animation Platform) est la bibliothèque JavaScript d'animation la plus utilisée sur le web professionnel. Elle équipe une part considérable des sites primés aux Awwwards ou au FWA, celle des studios qui construisent des expériences soignées, avec des séquences précises, des courbes d'accélération travaillées et un contrôle fin du timing. Avant, il fallait écrire ce code à la main : instancier une timeline, chaîner des tweens, gérer les plugins un par un.

Le 15 octobre 2024, à la Webflow Conf, Webflow a annoncé le rachat de GreenSock, l'éditeur de GSAP. L'opération n'a rien d'anecdotique pour une équipe qui produit des sites en no-code. Elle signifie que la référence du marché en animation web devient une brique native de Webflow, pas un script tiers qu'on colle dans un embed HTML et qu'on espère voir survivre à la prochaine mise à jour du thème.

Deuxième étape, le 30 avril 2025, avec la sortie de GSAP 3.13 : la bibliothèque devient entièrement gratuite, plugins compris, y compris ceux qui étaient réservés aux abonnés du Club GSAP comme SplitText ou MorphSVG, même en usage commercial. SplitText a au passage été réécrit, avec un fichier réduit d'environ moitié. Pour une équipe qui utilisait déjà GSAP en dur sur un projet custom, la licence payante disparaît. Pour une équipe Webflow, ça pose les fondations du morceau suivant.

Ce que le Designer permet de construire sans écrire une ligne de JavaScript

En juillet 2025, Webflow lance le nouveau moteur « Webflow Interactions powered by GSAP », disponible pour tous les comptes. Concrètement, l'interface d'interactions du Designer donne désormais accès à une bonne partie de ce que GSAP sait faire, sans passer par du code.

La timeline visuelle remplace la logique de déclencheurs isolés par une vraie séquence horizontale, où on positionne les étapes d'une animation les unes après les autres et on ajuste leur chevauchement d'un glisser-déposer. ScrollTrigger arrive nativement : une animation qui se joue en fonction de la position de scroll de l'utilisateur, avec la possibilité de la lier précisément à l'avancement du défilement plutôt qu'à un simple déclenchement au passage d'un seuil. SplitText permet d'animer un titre lettre par lettre ou mot par mot, l'effet qu'on voit sur beaucoup de landing pages récentes et qui demandait auparavant un script dédié. Les staggers gèrent le décalage en cascade entre plusieurs éléments (une grille de cartes qui apparaît une à une plutôt que d'un bloc), et l'éditeur d'easing donne accès à des courbes d'accélération avancées, au-delà des quelques presets standards, pour caler précisément la sensation de vitesse d'une animation.

Rien de tout ça n'est nouveau en soi, GSAP fait ça depuis des années en JavaScript. Ce qui change, c'est que le Designer expose ces réglages dans une interface visuelle, ce qui déplace la compétence requise : moins de syntaxe à connaître, plus de sens du rythme et de la mise en scène à développer.

Interactions classiques ou moteur GSAP : que choisir sur un site en production

Sur un site Webflow créé avant juillet 2025, la question se pose forcément. Les deux systèmes coexistent, Webflow ne force pas de migration automatique. Sur les nouveaux sites en revanche, le moteur GSAP est le comportement par défaut.

La coexistence a un coût technique qu'il faut connaître avant d'arbitrer. Interactions classiques et interactions GSAP chargent chacune leur propre runtime JavaScript. Sur un site qui mélange les deux (parce qu'une section ancienne utilise encore l'ancien système pendant qu'une nouvelle page a été construite avec le nouveau moteur), le navigateur télécharge et exécute deux bibliothèques d'animation en parallèle. Ça pèse sur le poids de page et sur le temps d'exécution du JavaScript, deux facteurs qui comptent directement dans les Core Web Vitals.

L'autre élément à intégrer dans la décision, c'est la trajectoire produit de Webflow. Seules les interactions GSAP recevront les évolutions futures. Les interactions classiques restent fonctionnelles, mais elles n'évolueront plus. Pour un site qui vit encore plusieurs années, refaire les interactions les plus visibles avec le nouveau moteur au fil des refontes de pages a du sens, plutôt que d'attendre une bascule complète coûteuse en une fois. Pour un site vitrine simple avec deux ou trois interactions discrètes, le jeu n'en vaut pas forcément la chandelle tant que rien ne casse.

Les erreurs qui transforment un site animé en site lent et confus

Avoir accès à un outil puissant ne dispense pas de discipline, et c'est souvent là que ça dérape. La première erreur, classique, c'est la surcharge décorative : une animation sur chaque élément de la page, des apparitions au scroll sur des blocs de texte qui n'en ont pas besoin, des effets qui ralentissent la lecture plutôt qu'ils ne la guident. Une animation devrait servir le message, pas le remplacer. Si un visiteur doit attendre la fin d'un effet de texte lettre par lettre pour lire un titre de section, l'animation nuit à l'information qu'elle est censée mettre en valeur.

Deuxième point de vigilance, l'accessibilité. La préférence système prefers-reduced-motion, activée par une part non négligeable d'utilisateurs (motion sickness, troubles de l'attention, simple préférence), doit être respectée. Une animation qui continue de tourner à pleine intensité malgré ce réglage crée une expérience inconfortable, voire inaccessible, pour ces visiteurs. Le nouveau moteur GSAP permet de gérer cette préférence dans les réglages d'interaction, encore faut-il penser à le faire systématiquement plutôt qu'au cas par cas.

Troisième point, l'impact sur les Core Web Vitals. Des animations mal maîtrisées dégradent le CLS (décalages visuels pendant le chargement) ou l'INP (réactivité aux interactions) quand trop de calculs tournent en parallèle sur le thread principal. Un site qui score bien en Lighthouse avant l'ajout des interactions et mal après n'a pas gagné en qualité, il a juste déplacé le problème.

Webflow face aux générateurs de sites par IA : deux outils, pas un duel

La question revient souvent en entreprise depuis l'arrivée des outils qui génèrent un site entier à partir d'un prompt. La réponse tient en une phrase : les deux approches coexistent plutôt qu'elles ne s'opposent. Webflow intègre lui-même un assistant IA capable de générer des sections, des pages ou des contenus CMS, ce qui accélère nettement le démarrage d'un projet. Décrire une structure de page et obtenir un premier jet en quelques secondes fait gagner du temps, personne ne le conteste.

Mais un site d'entreprise ne se juge pas sur sa vitesse de mise en place, il se juge sur sa capacité à tenir dans la durée : des classes propres, des combo classes cohérentes, des composants réutilisables, des collections CMS bien structurées. C'est exactement ce qui distingue un site administrable pendant des années d'une maquette générée en dix minutes puis abandonnée dès que la première modification devient compliquée à faire soi-même. La question du choix d'outil no-code face au code généré par IA se pose d'ailleurs de façon plus large, au-delà du seul cas Webflow, dans notre article vibe coding vs no-code. Pour une équipe qui vise l'animation sans forcément passer par GSAP, Framer reste une alternative à considérer, avec une approche différente de l'interactivité.

Monter en compétence sur ces nouveaux outils, en équipe

Le Designer a beau exposer visuellement des fonctions autrefois réservées au code, la compétence ne s'improvise pas : comprendre ce qu'un stagger apporte à une liste de cartes, savoir quand une timeline gagne à être découpée en plusieurs séquences plutôt qu'en une seule, repérer les cas où prefers-reduced-motion doit être géré, tout ça s'apprend en pratiquant sur de vrais projets, pas sur des tutoriels génériques.

Mill-Forma propose deux formations intra qui couvrent ce terrain. La formation Webflow : création de sites professionnels sans code pose les bases (structure, classes, CMS, responsive) et introduit les interactions au module dédié. La formation Webflow CMS et interactions avancées va plus loin sur ce sujet précis : timeline, ScrollTrigger, SplitText, staggers, et l'arbitrage entre interactions classiques et moteur GSAP sur un projet existant. Les deux se construisent sur vos pages et votre CMS réels, avec le formateur, avant la session.