Animation GSAP : 4 exemples de code prêts à coller (2026)

En bref : GSAP (GreenSock Animation Platform) est une librairie JavaScript d'animation, propriété de Webflow depuis octobre 2024 et gratuite pour tous depuis la version 3.13 d'avril 2025, ScrollTrigger, SplitText et MorphSVG compris, usage commercial inclus. La version courante est la 3.15 (relevé en octobre 2026). Dans Webflow, elle s'active sans script externe depuis les réglages du site, ou sans code avec les Interactions with GSAP. Les quatre exemples ci-dessous couvrent les besoins courants d'un site vitrine.

GSAP en octobre 2026 : gratuit, version 3.15, propriété de Webflow

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

Son principe tient en deux briques. Un tween fait passer un élément d'un état à un autre : position, opacité, échelle, rotation. Une timeline enchaîne plusieurs tweens avec un minutage précis, que vous pouvez mettre en pause, inverser ou lier au défilement.

Quatre dates suffisent pour comprendre où en est la librairie :

• 15 octobre 2024 : Webflow annonce le rachat de GreenSock, l'éditeur de GSAP. La librairie reste utilisable partout, pas seulement sur Webflow.
• 29 avril 2025 : GSAP 3.13 rend toute la librairie gratuite, plugins de l'ancien Club GSAP compris, « même pour un usage commercial ». Le Club ferme, SplitText est réécrit.
• 30 avril 2025 : nouvelle licence standard (modifiée le 30 mai 2025). Une seule interdiction : intégrer GSAP dans un outil qui permet de créer des animations visuelles sans code et qui concurrence Webflow. Pour un site, une application ou une campagne, aucune limite.
• 13 avril 2026 : sortie de GSAP 3.15.0, version courante sur npm au 21 octobre 2026.

Concrètement, il n'y a plus de version payante, plus de clé de licence, plus de dépôt privé. Le paquet npm et le CDN contiennent tout.

Charger GSAP : CDN officiel, npm ou intégration Webflow

Trois façons de charger la librairie. Choisissez-en une seule par site : GSAP chargé deux fois, c'est la première cause de bugs que nous rencontrons en audit.

Par CDN. Une balise par fichier, le cœur d'abord, les plugins ensuite, avant la fermeture du body. Les fichiers sont publiés sur jsDelivr à partir du paquet npm officiel :

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/SplitText.min.js"></script>

Par npm. Pour un projet avec bundler : npm install gsap, puis import gsap from "gsap" et import { ScrollTrigger } from "gsap/ScrollTrigger". Tous les plugins sont dans le paquet public depuis la 3.13.

Dans Webflow. Ne chargez rien à la main. Ouvrez les réglages du site, rubrique GSAP integration, activez la librairie et cochez les plugins utiles. Webflow héberge les fichiers, les charge et enregistre les plugins pour vous. Le détail est dans la section Webflow plus bas.

Dans les exemples qui suivent, la ligne gsap.registerPlugin est inutile sur Webflow, mais sans effet si le plugin est déjà enregistré. Vous pouvez la laisser.

Exemple 1 : apparition au scroll avec ScrollTrigger

Le besoin le plus courant : chaque bloc d'une page remonte légèrement et devient visible quand il entre dans l'écran. Donnez la classe reveal aux éléments concernés.

// Enregistre le plugin (inutile sur Webflow, sans effet en double)
gsap.registerPlugin(ScrollTrigger);

// Une animation par bloc .reveal, déclenchée quand son haut atteint 85 % de l'écran
gsap.utils.toArray(".reveal").forEach((bloc) => {
  gsap.from(bloc, {
    opacity: 0,
    y: 40,
    duration: 0.8,
    ease: "power2.out",
    scrollTrigger: {
      trigger: bloc,
      start: "top 85%",
      toggleActions: "play none none none"
    }
  });
});

Ce que font les réglages importants :

• start: "top 85%" signifie « quand le haut du bloc atteint 85 % de la hauteur de la fenêtre ». Le premier mot décrit l'élément, le second la fenêtre.
• toggleActions dit quoi faire à l'entrée, à la sortie, au retour et à la sortie par le haut. « play none none none » joue une fois. Mettez « play none none reverse » pour rejouer à l'envers quand on remonte.
• markers: true ajoute des repères visuels de début et de fin pendant le développement. Retirez-le avant de publier.

Pour une grille de cartes, remplacez la boucle par ScrollTrigger.batch(".card", { onEnter: (lot) => gsap.from(lot, { opacity: 0, y: 40, stagger: 0.15 }) }) : les cartes qui entrent ensemble s'animent en cascade.

Exemple 2 : titre lettre par lettre avec SplitText

SplitText découpe un texte en lignes, mots ou lettres, chacun dans son propre élément, pour les animer séparément. Depuis la version 3.13, il est gratuit et sait refaire la découpe quand la police finit de charger.

gsap.registerPlugin(SplitText);

// Découpe le titre en mots et en lettres, puis fait monter chaque lettre
SplitText.create(".hero_title", {
  type: "words, chars",
  autoSplit: true,
  onSplit(self) {
    // Renvoyer le tween permet à SplitText de le rejouer proprement après une nouvelle découpe
    return gsap.from(self.chars, {
      y: 40,
      autoAlpha: 0,
      duration: 0.6,
      ease: "power3.out",
      stagger: 0.03
    });
  }
});

Trois points à connaître. Le découpage en mots en plus des lettres évite qu'un mot se coupe en fin de ligne. L'option mask: "chars" ajoute un conteneur de masquage à chaque lettre, pour un effet de révélation par le bas. Par défaut, SplitText pose un aria-label sur le titre et cache les fragments aux lecteurs d'écran, ce qui garde le texte lisible pour l'accessibilité.

Réservez l'effet aux titres. Découper un paragraphe entier en lettres crée des centaines d'éléments et pèse sur mobile.

Exemple 3 : parallax au scroll

Un parallax simple : l'image d'une section se déplace moins vite que la page, ce qui donne de la profondeur. En CSS, donnez à l'image une hauteur de 120 % de sa section et à la section un overflow hidden, sinon un vide apparaît en bas.

gsap.registerPlugin(ScrollTrigger);

// L'image remonte de 20 % de sa hauteur pendant que la section traverse l'écran
gsap.to(".parallax_img", {
  yPercent: -20,
  ease: "none",
  scrollTrigger: {
    trigger: ".parallax_section",
    start: "top bottom",
    end: "bottom top",
    scrub: true
  }
});

scrub: true colle l'animation à la barre de défilement, dans les deux sens. Un nombre à la place de true, par exemple scrub: 0.5, ajoute une demi-seconde de lissage : le mouvement rattrape le scroll en douceur. L'ease none est volontaire, une courbe d'accélération n'a pas de sens quand c'est le doigt ou la molette qui pilote.

Exemple 4 : timeline au chargement

Une timeline enchaîne plusieurs animations avec un minutage précis. Le cas classique : à l'arrivée sur la page, le titre apparaît, puis le texte, puis le bouton, avec un léger chevauchement.

// Réglages communs à toutes les étapes
const tl = gsap.timeline({
  defaults: { duration: 0.7, ease: "power2.out" }
});

// Chaque étape démarre 0,4 s avant la fin de la précédente
tl.from(".hero_title", { y: 30, opacity: 0 })
  .from(".hero_text", { y: 20, opacity: 0 }, "-=0.4")
  .from(".hero_cta", { scale: 0.9, opacity: 0 }, "-=0.4");

Le troisième paramètre, « -=0.4 », est la position dans la timeline : 0,4 seconde avant la fin de l'étape précédente. Vous pouvez aussi donner un temps absolu (1.2) ou un libellé. La même timeline se contrôle ensuite avec tl.pause(), tl.reverse() ou tl.restart(), par exemple au clic sur un bouton.

Une règle de performance : n'animez pas depuis une opacité nulle l'élément le plus grand du premier écran, image de couverture ou grand titre. Google mesure le moment où il s'affiche (le LCP), et une animation d'entrée le retarde.

Intégrer 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, un réglage pour le mouvement réduit et la réutilisation d'une interaction sur tout le site.

Selon l'aide Webflow mise à jour le 8 septembre 2026, c'est la version 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 : gardez-en une seule. Notre guide pas à pas pour créer une animation sur Webflow couvre ce panneau en détail.

En code : l'intégration GSAP du site

La procédure officielle (article d'aide mis à jour le 17 juillet 2026) tient en cinq étapes :

1. Ouvrez les réglages du site, cliquez sur GSAP integration et activez la librairie GSAP.
2. Cochez uniquement les plugins utiles (ScrollTrigger, SplitText...). Webflow les héberge et les enregistre automatiquement : aucun script CDN à ajouter.
3. Écrivez l'animation dans les réglages de la page, zone Custom code, avant la balise de fermeture du body, ou dans un composant Embed. Enveloppez-la dans un écouteur DOMContentLoaded pour que les éléments existent au moment où le script tourne.
4. Prévisualisez : Webflow exécute le code personnalisé en preview, avant publication. Activez markers: true sur ScrollTrigger pour caler les déclenchements.
5. Retirez les markers, testez sur un vrai téléphone, puis publiez.

L'enveloppe à copier pour chaque exemple de cet article :

<script>
window.addEventListener("DOMContentLoaded", () => {
  // collez ici l'exemple choisi
});
</script>

Les classes. Dans Webflow, le sélecteur ".hero_title" désigne la classe donnée à l'élément dans le panneau Style. Nommez vos classes avant d'écrire le script, et évitez d'animer en code un élément qui porte déjà une interaction native : les deux écrivent la même propriété transform et la dernière gagne.

Le support Webflow n'assiste pas sur le code personnalisé : les questions passent par la communauté ou par votre agence.

Vous débutez sur Webflow ? Construisez d'abord la page sans animation. L'animation vient en dernier, quand la structure et les textes sont stables.

Les erreurs que nous corrigeons le plus souvent

Huit causes reviennent dans la quasi-totalité des animations GSAP qui ne marchent pas ou qui ralentissent un site.

• Le script tourne avant le DOM. GSAP ne trouve pas l'élément et la console affiche « target not found ». Placez le code avant la fermeture du body ou dans un écouteur DOMContentLoaded.
• GSAP chargé deux fois. Intégration Webflow activée et balise CDN ajoutée à la main : deux copies, des plugins enregistrés sur la mauvaise, des comportements aléatoires. Une seule source.
• Conflit avec une interaction native. Une interaction Webflow et un tween GSAP sur le même élément écrivent tous deux la propriété transform. Choisissez l'un ou l'autre par élément.
• Classic Interactions et Interactions with GSAP mélangées. Chaque système charge ses ressources. L'aide Webflow classe les performances dans cet ordre : GSAP seul, Classic seul, puis les deux ensemble.
• Mobile oublié. Un pin et un scrub lourd qui passent sur un MacBook saccadent sur un téléphone milieu de gamme. Simplifiez ou coupez sous 800 px avec gsap.matchMedia(), et testez sur un vrai appareil, pas dans l'émulateur.
• prefers-reduced-motion ignoré. Certaines personnes demandent à leur système de réduire les animations. gsap.matchMedia() le gère en une condition :

const mm = gsap.matchMedia();

// Les animations ne tournent que si aucune réduction de mouvement n'est demandée
mm.add("(prefers-reduced-motion: no-preference)", () => {
  // vos tweens et timelines ici
});

• Contenu principal masqué au chargement. Un hero qui part d'une opacité nulle retarde le LCP et dégrade les Core Web Vitals. Animez ce qui entoure l'élément principal, pas l'élément lui-même.
• Propriétés coûteuses. Animer top, left, width ou height force le navigateur à recalculer la mise en page à chaque image. Préférez x, y, scale et opacity, qui passent par transform et restent fluides.

Les markers oubliés en production sont la neuvième, plus embarrassante que grave. Ces réglages rejoignent les bases de l'accessibilité web : une animation imposée à quelqu'un qui l'a refusée est un défaut, pas un détail.

Quand animer, et quand s'abstenir : notre règle

Notre position : une animation doit aider à comprendre ou à décider, sinon elle coûte du temps de chargement et de l'attention pour rien. Dans nos projets, nous la réservons à trois moments : l'arrivée sur la page, la démonstration d'un produit ou d'une preuve, et l'appel à l'action. Le reste de la page reste sobre. C'est la règle que nous appliquons comme agence Webflow depuis 2019, sur plus de 150 sites livrés.

Pour Qobra, SaaS de gestion des commissions, nous avons construit le site Webflow qui accompagnait son rebranding, puis nous l'avons optimisé pendant deux ans : calculateur de ROI, tunnels par cible. Résultat documenté : demandes multipliées par 3 et trafic organique par 16. L'animation y sert la lecture du produit. Elle n'a jamais été le sujet.

Pour Zeliq, plateforme de prospection, nous avons reconstruit le site avec une bibliothèque de composants et formé l'équipe. Une animation définie une fois dans un composant se réutilise sur toutes les pages, sans développeur, et reste cohérente.

Pour Morning, espaces de travail, le taux de conversion a doublé. Ce qui a joué, c'est le travail sur les parcours, pas l'animation. Quand un client nous demande « plus de mouvement » sur une page qui ne convertit pas, nous commençons par le parcours.

Quand s'abstenir : une page de contenu long, un formulaire, un tableau de prix, une page lue sur mobile en 4G. Quand animer : une page produit, une page d'accueil, une preuve chiffrée qui mérite d'être remarquée. Et dans les deux cas, une animation fortement visible par page, rarement deux.

Ce que nous faisons pour vous : cadrage, design en composants dans Figma, intégration Webflow avec les Interactions with GSAP ou du code selon le besoin, recette sur appareils réels, puis formation de votre équipe marketing. Un site complet est livré en 8 à 12 semaines. Pour une équipe basée en Île-de-France, notre agence Webflow à Paris intervient en visio ou dans vos locaux.