Si des développeurs Webflow de longue date lisent ces lignes, je suis persuadé que je peux vous faire remonter des souvenirs douloureux à la simple prononciation des mots “elements stagger animations”, ou encore avec l’évocation d’animations de sliders particulièrement complexes sur Webflow.
J’ai personnellement eu la chance de pouvoir développer des animations très complexes pour des sites qui ont été mis en avant sur Awwwards par le passé, lorsque j’étais plus du côté design que technique de la force ! Et c’est là une très bonne expérience à prendre pour n’importe quel développeur qui souhaite pousser Webflow le plus loin possible, tant sur le plan esthétique que technique.
Pour autant, malgré le fait que l’éditeur d’animations de Webflow permet de faire des choses très complexes et sophistiquées, notamment par rapport aux autres solutions comme Wordpress, bouuuuuh 👎, il n’en reste pas moins que, parfois, l’éditeur d’animations tel qu’on l’a connu jusqu’à présent n’était pas à la pointe de l’UX en termes de confort de développement. Mais également, il pouvait comporter certaines limites comme, notamment, certaines propriétés CSS qui ne peuvent pas être contrôlées depuis le panel d’animations, ou encore l’impossibilité de modifier les classes des éléments de l’animation, dynamiquement parlant. Contraintes qui, pour être contournées, nécessitaient l’utilisation de librairie assez avancée de javascript, rendant la création d’une animation plus complexe qu’elle n’aurait initialement dû être, à cause d’un détail seulement.
Comment est-ce que ça aurait pu être plus simple ? Par exemple, si ces animations avaient été faites avec GSAP dès le départ. Alors, on se serait évité beaucoup de prises de tête avec les concepts de timelines et toutes les méthodes natives de la librairie… Mais attendez…
Webflow n’aurait pas justement racheté GSAP ?? Bien sûr que si ! Et je vous propose dans cet article de voir en quoi cela va profondément changer la vie de tous les développeurs, et surtout creative développeurs opérant sur Webflow.
Dans un précédent article, nous avions déjà abordé les différences entre GSAP et les interactions Webflow… mais il a été écrit avant que l’acquisition de GSAP se fasse. Je vous propose donc de recommencer notre lecture avec une introduction de la librairie GSAP.
GSAP, la librairie qui a donné vie au web
Si vous avez déjà vu un site web où les éléments semblent danser à l’écran – un titre qui s’anime caractère par caractère, une image qui glisse doucement au défilement, ou un logo qui se transforme comme par magie – il y a de fortes chances que GSAP (GreenSock Animation Platform) soit derrière tout ça de près ou de loin.
Cette bibliothèque JavaScript est LA rockstar pour créer des animations web fluides, dynamiques et ultra-précises utilisée par des millions de créateurs dans le monde entier. GSAP a longtemps été le secret bien gardé des développeurs chevronnés travaillant sur des frameworks comme Vue.js ou Next.js pour créer des sites Awwwards à couper le souffle.
Mais ne vous inquiétez pas, même si elle a une aura de “truc de pro”, elle est bien plus accessible qu’elle n’en a l’air. Chez Octolio, on adore GSAP pour sa capacité à transformer un site banal en une expérience qui fait dire “wow”. Alors, pourquoi cette bibliothèque est-elle si puissante ? Laissez-moi vous emmener rapidement dans les coulisses.
Imaginez GSAP comme un chef d’orchestre qui synchronise chaque mouvement sur votre site avec une précision chirurgicale. Ce qui rend GSAP si spécial, c’est qu’il vous donne un contrôle total sur vos animations, tout en restant léger comme une plume. Vous voulez qu’un bouton zoome doucement quand on passe la souris dessus ? Ou qu’une section entière s’anime au fur et à mesure que l’utilisateur fait défiler la page ? GSAP rend ça non seulement possible, mais aussi fluide, même sur un vieux smartphone ou un navigateur capricieux. Son moteur est optimisé pour tourner à 60 images par seconde, ce qui garantit des animations qui ne saccadent jamais, peu importe l’appareil.
L’un des super-pouvoirs de GSAP, c’est sa timeline. Pensez à une frise chronologique où vous pouvez organiser vos animations comme des scènes dans un film. Vous décidez quand chaque élément entre en jeu, combien de temps il reste, s’il doit se répéter ou même boucler à l’infini. Vous pouvez jouer avec des effets d’accélération (ou “easing”) pour rendre une animation super naturelle, comme un rebond ludique ou une arrivée tout en douceur.
Et puis, il y a les plugins GSAP, qui sont un peu comme les gadgets d’un super-héros.
Par exemple ScrollTrigger : il vous permet de déclencher des animations pile au moment où l’utilisateur fait défiler une section, parfait pour créer des effets parallax ou révéler du contenu de manière dramatique.
SplitText, lui, a changé la vie de ceux qui s’occupent d’animer du texte : il permet de découper n’importe quel texte en mots, lignes ou même caractères, pour des animations où chaque lettre peut avoir sa propre chorégraphie.
Vous voulez transformer un logo SVG en une autre forme, comme par magie ? MorphSVG s’en charge avec une fluidité impressionnante. Et si vous rêvez de faire bouger un élément le long d’une courbe ou d’un cercle, MotionPath vous donne cette liberté créative. Ces outils un peu plus avancés rendent GSAP incroyablement polyvalent, que vous travailliez sur un portfolio, un site e-commerce ou une webapp complexe.
Un autre point fort ? GSAP marche partout. Chrome, Firefox, Safari, Edge, et même leurs versions mobiles – aucun navigateur ne lui résiste. Finis les casse-têtes où une animation fonctionne parfaitement sur votre ordi mais plante sur le téléphone de votre client. GSAP gère les différences entre navigateurs pour que l’expérience soit toujours nickel.
Et ne vous laissez pas intimider par son côté “tech”. Oui, GSAP a longtemps été l’outil préféré des développeurs pointus, mais sa documentation ultra-complète et sa communauté hyper active rendent l’apprentissage accessible, même pour les débutants.
D’ailleurs, pour ceux qui aiment les explications plus visuelles, voici une vidéo de nos amis de Digidop, que je vous recommande vivement, qui présente la librairie GSAP :
GSAP & Webflow : une révolution
Imaginez maintenant avoir toute la puissance de GSAP au bout des doigts sans avoir à écrire une seule ligne de code.
C’est exactement ce que l’acquisition de la GSAP par Webflow en octobre 2024 a rendu possible. Cette décision a bouleversé le monde du web design, et avec l’arrivée de l’interface utilisateur (UI) GSAP en juillet 2025, Webflow a mis entre les mains de tous – designers, freelances, agences comme la nôtre, Octolio – un outil puissant pour transformer des sites statiques en expériences dynamiques. Alors, comment cette acquisition a-t-elle changé la donne, qu’est-ce que ça signifie pour l’avenir de GSAP et de Webflow, et pourquoi le fait que GSAP soit désormais gratuit pour les utilisateurs de Webflow est une si bonne nouvelle ? Laissez-moi vous raconter tout ça.
En octobre 2024, lors de la Webflow Conf, Webflow a annoncé une nouvelle qui a fait vibrer la communauté du web design : ils venaient de racheter GreenSock, l’entreprise derrière GSAP, la bibliothèque JavaScript dont on parle depuis le début de cet article. Ce n’était pas juste un achat stratégique, mais une véritable fusion de visions. L’équipe de GreenSock, avec tous les talents qu’elle comporte, a rejoint Webflow pour intégrer GSAP directement dans la plateforme.
Leur objectif ? Rendre les animations de niveau professionnel accessibles à tous, même à ceux qui n’ont jamais touché au code.
Cette acquisition répond à un besoin clair : aujourd’hui, un site web doit être plus qu’une belle vitrine. Il doit captiver, engager, et raconter une histoire. GSAP, déjà utilisé sur des millions de sites, était l’outil parfait pour donner vie à cette vision, surpassant les anciennes limites du système d’interactions de Webflow, connu sous le nom d’IX2.
Avec Webflow aux commandes, GSAP n’est pas près de ralentir. Au contraire, l’avenir de la bibliothèque s’annonce encore plus brillant. Webflow investit massivement pour continuer à développer GSAP, en améliorant ses plugins phares comme ScrollTrigger ou SplitText dont on a parlé plus tôt. Le tout en conservant ce qui a fait le succès initial de Webflow, la qualité de son expérience de développement. Ils explorent même de nouveaux outils pour répondre aux besoins des créateurs. Mais ce qui est vraiment génial, c’est que GSAP reste accessible à tous, même en dehors de Webflow. Si vous utilisez GSAP pour un projet hors plateforme, pas de panique : vos licences actuelles sont respectées, et la bibliothèque reste ouverte à la communauté.
Un exemple concret de cet élan ? Le Webflow x GSAP Community Challenge de mai 2025, qui a vu des créateurs du monde entier partager des projets époustouflants, des hero sections animées aux transitions de page fluides. Cette initiative a montré à quel point GSAP peut inspirer et rassembler, tout en restant fidèle à sa mission d’innovation.
En avril 2025, Webflow a lâché une bombe : GSAP est désormais 100 % gratuit pour tous, y compris pour les utilisateurs de Webflow, même sur les plans gratuits. Plus besoin de payer pour accéder à des plugins comme ScrollTrigger ou MorphSVG. Tout est intégré directement dans Webflow, activable en un clic via les paramètres du site. Vous voulez faire apparaître un bouton avec un effet de zoom au survol ? Ou déclencher une animation quand un utilisateur fait défiler une section ? C’est désormais à portée de main, sans quitter l’interface visuelle de Webflow.
Et ce n’est pas tout : les plugins GSAP ont été optimisés pour Webflow. Par exemple, SplitText est maintenant 50 % plus léger, ce qui signifie des animations plus rapides et un impact minime sur les performances de votre site – un point crucial pour le SEO et l’expérience utilisateur. Les utilisateurs avancés peuvent toujours ajouter du code personnalisé pour des animations ultra-spécifiques, mais pour la plupart, l’UI GSAP fait tout le travail.
L'UI GSAP dans Webflow
Tout ça c’est bien beau, mais le vrai game-changer, c’est l’UI GSAP, arrivée en juillet 2025. Cette interface visuelle rend la création d’animations accessible à tous. Vous n’avez plus besoin d’être un pro du JavaScript pour faire défiler une section avec un effet parallax ou animer un titre caractère par caractère. Tout se fait dans le Designer de Webflow, avec une timeline claire et un aperçu en temps réel. Que vous soyez un designer novice ou un développeur aguerri, cette interface vous permet de créer des animations pour donner vie à vos projets comme sait le faire Webflow, à la perfection.
Pour commencer, activer GSAP dans Webflow est aussi simple que de cliquer sur un bouton. Rendez-vous dans les paramètres du site (Site Settings) de votre projet Webflow, et cherchez l’onglet Integrations. Là, vous trouverez l’option pour activer la bibliothèque GSAP et ses plugins, comme ScrollTrigger ou SplitText. Un clic, et c’est parti ! Pas besoin de plan payant, tout est inclus, même dans le plan gratuit de Webflow. Une fois activé, GSAP s’intègre directement dans le Designer, prêt à transformer vos idées en animations fluides.
L’UI GSAP, c’est un peu comme un studio de montage vidéo, mais pour vos animations web. Au lieu de jongler avec du JavaScript, tout se passe dans une interface visuelle avec une timeline horizontale qui vous montre exactement comment vos éléments vont bouger. Vous voulez qu’un titre fasse un fondu en entrant sur la page ? Ou qu’une image glisse doucement au défilement ? Sélectionnez l’élément dans le Designer, ouvrez le panneau d’interactions (le petit éclair dans la barre latérale), et laissez l’UI GSAP vous guider.
Voici quelques exemples d’animations que vous pouvez créer en quelques clics :
- Effets de survol (hover) : faites grossir un bouton ou changez la couleur d’un texte quand l’utilisateur passe la souris dessus. Par exemple, un bouton qui s’illumine avec un léger zoom pour inviter au clic.
- Animations déclenchées par le défilement : avec ScrollTrigger, vous pouvez faire apparaître une section ou animer des éléments au fur et à mesure que l’utilisateur descend dans la page. Imaginez une statistique qui s’incrémente dynamiquement ou une image qui glisse depuis le côté.
- Transitions de page fluides : Créez des passages entre pages qui donnent une impression de fluidité, comme un fondu élégant ou un effet de rideau, pour une navigation qui en jette.
Le meilleur ? Vous pouvez prévisualiser vos animations en temps réel dans le Designer. Plus besoin de publier votre site pour voir si ça fonctionne. Si quelque chose ne va pas, ajustez la timeline, testez, et c’est réglé en quelques secondes.
Vous avez déjà un site construit avec l’ancien système d’interactions de Webflow (IX2) ? Pas de panique ! Webflow a prévu une transition en douceur. Vous pouvez basculer entre les Classic Interactions et l’UI GSAP dans les paramètres du site, sans casser vos animations existantes. Cela dit, une fois que vous aurez goûté à la puissance de GSAP, vous ne voudrez probablement plus revenir en arrière. Les anciennes limitations, comme les conflits entre animations ou les previews approximatives, sont de l’histoire ancienne avec l’IX3, le nouveau moteur d’interactions basé sur GSAP.
Quelques astuces pour briller
Pour tirer le meilleur de l’UI GSAP, voici quelques tips qu’on utilise chez Octolio :
- Commencez simple : testez avec des animations légères, comme un fondu ou un léger déplacement, avant de vous lancer dans des effets complexes.
- Utilisez les collections CMS : associez GSAP à Webflow CMS pour animer des contenus dynamiques, comme une liste de produits qui s’anime différemment à chaque chargement.
- Testez sur mobile : ce qui est fluide sur un ordinateur peut sembler lourd sur un téléphone. Utilisez la vue responsive du Designer pour vérifier.
- Inspirez-vous : le forum Webflow et la communauté GSAP regorgent d’exemples d’idées de projet à développer. Cherchez des clones de projets (clonables) pour voir comment d’autres utilisent l’UI GSAP.
Qui mieux que des experts Webflow pour entretenir votre Webflow ?
Pour discuter de votre projet, c’est ici
