GSAP, pour GreenSock Animation Platform, est une bibliothèque JavaScript qui anime les éléments d'une page web : textes, images, formes, chiffres. Elle est connue pour sa fluidité, sa précision et ses extensions, comme ScrollTrigger pour le défilement ou SplitText pour découper un texte en lignes, mots ou lettres.

À donner du mouvement à un site sans le rendre lourd : un titre qui se révèle ligne par ligne, une photo qui se pose, un tracé qui se dessine, un bloc qui reste épinglé pendant qu'on défile. Bien utilisé, il guide le regard vers ce qui compte ; mal utilisé, il fait attendre. On s'en sert pour la première raison.

GSAP est-il intégré à Webflow ?

Oui. Webflow a racheté GreenSock, l'éditeur de GSAP, et ses interactions reposent désormais dessus. Dans les réglages du site, on active GSAP et les extensions utiles ; Webflow les charge sur les pages publiées. On le voit dans le code de nos sites sur Webflow : ScrollTrigger et SplitText y sont servis par Webflow lui-même.

GSAP est-il gratuit ?

Oui. Depuis son rachat par Webflow, GSAP est gratuit pour tous, extensions comprises (SplitText, ScrollTrigger, DrawSVG, MorphSVG…), y compris pour un site commercial. Sur Webflow, il n'y a même rien à installer.

GSAP ou les animations CSS ?

Pour un effet simple, un survol ou un fondu, le CSS suffit et ne charge rien de plus. GSAP prend le relais dès qu'il faut enchaîner plusieurs animations, les lier au défilement, découper un texte ou piloter précisément une timeline. Sur un même site, on mélange souvent les deux.

Les animations ralentissent-elles un site ?

Pas si elles sont bien faites. GSAP anime surtout la position, l'échelle et l'opacité, que le navigateur gère sans effort. On évite les animations qui bloquent la lecture, on n'active que les extensions utilisées et on teste chaque page sur téléphone avant la mise en ligne.

Faut-il savoir coder pour utiliser GSAP ?

Plus forcément. Dans Webflow, les interactions construites sur GSAP s'assemblent à la souris : déclencheur, éléments, timeline. Pour un effet que l'interface ne propose pas, on écrit quelques lignes de JavaScript, rangées dans Slater.

GSAP fonctionne-t-il avec Shopify ?

Oui, GSAP est une bibliothèque JavaScript : elle se charge sur n'importe quel site, une boutique Shopify comprise. C'est le cas sur la boutique de DS Wood, qui charge GSAP et ScrollTrigger. Sur Webflow, la bibliothèque est déjà intégrée.

Et les visiteurs qui n'aiment pas les animations ?

On respecte le réglage « réduire les animations » de leur téléphone ou de leur ordinateur : les éléments s'affichent directement à leur place, sans mouvement. Le contenu reste le même, seule la mise en scène disparaît.

Comment utilisez-vous GSAP sur vos sites ?

Surtout à travers les interactions de Webflow, qui reposent dessus. Sur Ecobat, un script GSAP découpe chaque titre marqué en lignes qui remontent au défilement ; sur Proodos, Webflow charge en plus l'extension DrawSVG pour faire dessiner des tracés.

GSAPNos animations

À quoi sert GSAP : animer un site, désormais dans WebflowDes pages qui s'animent au défilement.

GSAP est une bibliothèque JavaScript d'animation, désormais intégrée nativement à Webflow : les interactions du Designer reposent dessus. On s'en sert pour animer vos pages au défilement, titres révélés ligne par ligne, photos qui se posent, tracés qui se dessinent, sans alourdir le site.

On se parle ?

Voir nos sites

Interactions· AccueilPropulsé par

Cabosse RougeChocolats · Boutique · Contact

Chocolats de saison

Des chocolatspour l'Alsace

Façonnés à Colmar, livrés d'Obernai à Haguenau.

DéclencheurAu défilement · ScrollTrigger

0 s0,51 s

Titrelignes · SplitText

Photoéchelle et fondu

Traittracé · DrawSVG

Textefondu, décalé

Extensions chargées par WebflowScrollTriggerSplitTextDrawSVG

Aperçu4 pistes · 1,2 s

Nos réalisations animées avec GSAP

Des sites qui prennent
vie au défilement.

Toutes nos réalisations

30pages conçues

Site Webflow

Ecobat

Un site Webflow pour une entreprise née de la fusion de deux acteurs de la rénovation.

Chaque titre marqué se découpe en lignes avec SplitText et remonte à l'écran grâce à ScrollTrigger, dans un script GSAP rangé sur Slater.

12pages conçues

Site Webflow

Proodos

Une plateforme Webflow de coaching scientifique pour les concours d'ingénieurs.

Webflow y charge GSAP avec trois extensions activées, ScrollTrigger, SplitText et DrawSVG, pour animer textes et tracés au défilement.

23pages conçues

Site Webflow

Sunova

Un site Webflow pour un installateur de panneaux photovoltaïques.

Les animations du site passent par le GSAP intégré à Webflow : ScrollTrigger pour le défilement, SplitText pour les titres.

5techniques de marquage détaillées

Site Webflow

Atelier Demain

Un site vitrine Webflow sur mesure pour un atelier de marquage textile.

GSAP, ScrollTrigger et SplitText chargés nativement par Webflow : aucune bibliothèque externe à maintenir à côté du site.

8sections articulées en une page

Site WebflowErstein, Alsace

Erstein-Krafft

Une landing page de campagne pour une liste municipale, en une seule page.

Huit sections rythmées par des animations au défilement, avec GSAP, ScrollTrigger et SplitText chargés par Webflow.

Votre projet ?

Et vous ?

Un site qui raconte quelque chose en défilant ?

Dites-nous ce que vos visiteurs doivent retenir : on anime ce qui compte, et seulement ce qui compte.

Voir le projet

À quoi sert GSAP

Animer, enchaîner,
au défilement.

GSAP (GreenSock Animation Platform) anime tout ce que le navigateur affiche : textes, images, formes, chiffres. On décrit un état de départ et un état d'arrivée, GSAP calcule chaque image, de façon fluide sur tous les navigateurs.

Une animation, deux états

On dit à un élément où aller et en combien de temps ; GSAP fait le reste, image par image, avec la courbe de vitesse choisie.

Des timelines

Plusieurs animations s'enchaînent ou se chevauchent sur une ligne de temps : on règle l'ordre une fois, tout reste synchronisé.

Le défilement aux commandes

Avec ScrollTrigger, une animation démarre quand une section entre à l'écran, ou suit le défilement pas à pas, élément épinglé compris.

Intégré à Webflow

GSAP fait tourner les interactions du Designer : on construit l'animation à la souris, Webflow charge GSAP sur le site publié.

Chez nous : les interactions du Designer

GSAP ou un autre outil ?

GSAP n'est pas là
pour tout faire bouger.

Une animation doit aider à lire, pas faire patienter. On sort GSAP quand le mouvement raconte quelque chose ; pour le reste, on vous dit ce qui suffit.

Nos animations

GSAP, si…

Votre site doit raconter quelque chose en défilant : des étapes, des chiffres, une histoire.
Les animations doivent rester fluides partout, téléphone compris, sans saccade.
Votre site est sur Webflow : GSAP y est déjà intégré, il n'y a rien à installer.
Vous voulez des effets précis : texte découpé en lignes, tracé qui se dessine, bloc épinglé.

Animer mon site

Les alternatives

Plutôt un autre outil, si…

Un simple fondu au survol d'un bouton : une transition CSS suffit, sans bibliothèque.
Un carrousel de réalisations ou d'avis : Splide est fait pour ça, glisser au doigt compris.
Un comportement sur mesure qui n'est pas une animation : on l'écrit dans Slater, avec ou sans GSAP.
Un site qui doit rester très sobre : on ne charge pas GSAP du tout, chaque script en moins compte.

Choisir le bon outil

Notre avis sur Slater

Vous hésitez ? Montrez-nous un site dont les animations vous plaisent : on vous dit ce qui relève de GSAP, et ce qui alourdirait le vôtre.

Notre agence Webflow

GSAP, désormais dans Webflow

L'animation se règle
dans le Designer.

C'est le grand changement : GSAP appartient désormais à Webflow et fait tourner ses interactions. On construit l'animation dans le Designer, Webflow charge GSAP et les extensions activées sur le site publié, et on garde le code pour les cas que l'interface ne couvre pas.

Comment on anime une page

On choisit le déclencheur
On compose la timeline
On active les extensions
La page publiée s'anime

Animer mon site

Quand l'animation démarre-t-elle ?

Au chargement Au survol Au clic Au défilement

DébutSection à 80 % de l'écran

Lié au défilement (scrub)Oui

ActionRévéler le texte en lignes

Titres de section8 éléments

0 s0,40,81,2 s

Titrelignes, décalées

Paragraphefondu

Photoéchelle

Boutonapparition

Durée0,8 s

Courbe · expo.out

Décalage des lignes0,12 s

Réglages du site · GSAP

GSAPLa bibliothèque, chargée par Webflow

ScrollTriggerAnimations liées au défilement

SplitTextTexte découpé en lignes, mots, lettres

DrawSVGTracés qui se dessinent

MorphSVGUne forme qui en devient une autre

Seules les extensions activées sont chargées sur le site publié.

Cabosse RougeChocolats · Boutique · Contact

Chocolats de saison

Des chocolatspensés pourl'Alsace

Servi par Webflow

Comment ça se passe

Quatre étapes,
des animations utiles.

Vous n'avez pas besoin de connaître GSAP. On décide avec vous de ce qui mérite de bouger, on le dessine, on le construit, et on vérifie que le site reste rapide.

On choisit ce qui bouge

L'arrivée d'un titre, un chiffre, une étape : on repère les moments qui méritent une animation. Le reste reste calme.

Vous : un appel

On le prévoit en maquette

Dans Figma, chaque section dit ce qui bouge et quand : l'animation fait partie du design, pas d'un ajout de fin.

Vous : vous validez la maquette

On le construit dans Webflow

Les interactions du Designer, construites sur GSAP, et un script sur mesure quand l'interface ne suffit pas.

Vous : vous testez au téléphone

On garde le site léger

Animations testées sur téléphone, coupées pour qui désactive les animations, et aucune extension chargée pour rien.

Vous : un site rapide

Chez nous, au quotidien

Quand GSAP entre
dans un projet.

GSAP est sur la plupart de nos sites Webflow récents, souvent sans qu'on le voie : il tourne derrière les interactions. Voici à quels moments on s'en occupe.

À la maquette