GSAP x Webflow : Crée des animations ultra poussées facilement

Les animations donnent vie à un site, et GSAP (GreenSock Animation Platform) est l’outil ultime pour repousser les limites de Webflow. Si tu veux créer des effets de scroll fluides, des transitions dynamiques et des interactions avancées, tu es au bon endroit !

Auteur

Aurélien Gallier

Co-fondateur de CORIACE

Senior Webdesigner et expert Webflow, Framer et Figma, Aurélien incarne le visage de Coriace

Publié le

February 12, 2025

• Temps de lecture : 2 min

Rejoindre

Webflow permet de réaliser des animations sans code, mais ses possibilités restent limitées pour les effets complexes. GSAP est un framework JavaScript puissant qui permet d’aller beaucoup plus loin. Il offre des animations ultra fluides et une flexibilité inégalée. Tu peux créer des effets de parallax, de morphing, de reveal en scroll, et bien plus encore.

Dans cet article, on va voir comment intégrer GSAP à Webflow et réaliser des animations époustouflantes. Prépare-toi à donner une nouvelle dimension à tes sites Webflow !

Tu peux consulter notre dernière vidéo youtube sur GSAP pour en savoir plus :

Pourquoi utiliser GSAP avec Webflow ?

Webflow offre des outils d'animation puissants, mais ils ont leurs limites. GSAP (GreenSock Animation Platform) permet d'aller bien plus loin en apportant des effets fluides, performants et hautement personnalisables.

Les avantages de GSAP pour Webflow

Des animations ultra fluides : Contrairement aux animations CSS classiques, GSAP assure des transitions sans saccades.
Un contrôle total : Chronologie, vitesse, direction, tout est ajustable avec une précision millimétrée.
Compatibilité optimale : Fonctionne parfaitement sur tous les navigateurs modernes.
Performances optimisées : GSAP est conçu pour une exécution rapide et efficace, même sur des animations complexes.

GSAP vs les animations Webflow

Outil	Points forts	Limites
Wix	Idéal pour créer des sites simples rapidement. Interface accessible.	Très limité pour les portfolios complexes ou les besoins professionnels avancés. Peu performant en SEO et manque de flexibilité.
WordPress	Puissant et adaptable avec de nombreux plugins disponibles.	Complexe à prendre en main, exige des compétences techniques ou un développeur pour un résultat optimal.
Webflow	Offre une personnalisation sans limite, un design sur mesure, des performances élevées et des outils SEO intégrés.	Peut demander un peu d’adaptation pour les débutants, mais le résultat final est incomparablement plus professionnel.

Les bases de GSAP

Avant de plonger dans l’intégration de GSAP avec Webflow, il est essentiel de comprendre les bases de cet outil puissant.

Comment fonctionne GSAP ?

GSAP est une librairie JavaScript qui permet d’animer facilement des éléments sur une page web. Il repose sur des timelines et des tweens :

Tween : Un tween est une animation qui affecte une propriété d'un élément (exemple : déplacement, opacité, rotation). Il se décline en plusieurs types :
- gsap.to() : Anime une propriété jusqu'à une valeur donnée.
- gsap.from() : Anime une propriété en partant d'une valeur initiale.
- gsap.fromTo() : Définit un état initial et un état final.
Timeline : Une timeline permet d'enchaîner plusieurs tweens de manière fluide et synchronisée, utile pour les animations complexes.

Les commandes essentielles de GSAP

Voici quelques commandes de base pour animer un élément avec GSAP :

Animation de base : changer l'opacité et déplacer un élémentgsap.to(".mon-element", { duration: 1, opacity: 1, x: 100 });‍

Animation inversée : part d'un état donnégsap.from(".mon-element", { duration: 1, opacity: 0, x: -100 });Animation plus précise : définition d'un état initial et finalgsap.fromTo(".mon-element", { opacity: 0, x: -100 }, { duration: 1, opacity: 1, x: 100 });Création d'une timeline avec plusieurs animationslet tl = gsap.timeline(); tl.to(".mon-element", { duration: 1, x: 100 }) .to(".mon-element", { duration: 1, rotation: 360 }) .to(".mon-element", { duration: 1, scale: 1.5 });

Pourquoi GSAP est-il si puissant ?

Des performances optimales même avec des animations complexes, car GSAP utilise un moteur optimisé pour éviter les ralentissements.
Des effets avancés comme le morphing, le scroll-trigger, les interactions physiques et le motion path.
Un contrôle total sur la vitesse, les événements et les interactions, permettant des animations ultra fluides et précises.
Compatibilité universelle avec tous les navigateurs récents, ce qui garantit une expérience utilisateur homogène.

Les plugins GSAP incontournables

GSAP propose plusieurs plugins pour aller encore plus loin dans la création d’animations interactives :

ScrollTrigger : Active des animations lors du scroll de la page.
MotionPathPlugin : Anime un élément le long d’un chemin défini.
MorphSVGPlugin : Permet de transformer des formes SVG en douceur.
SplitText : Anime du texte en séparant chaque lettre ou mot.

Installation de GSAP sur Webflow

Pour utiliser GSAP sur Webflow, il faut d'abord ajouter la librairie à ton projet. Tu peux le faire via un CDN en ajoutant ce script dans le custom code de Webflow :

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js>"></script>

Si tu veux utiliser des plugins comme ScrollTrigger ou MotionPathPlugin, assure-toi d'inclure les scripts appropriés :

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js>"></script>

Place ces scripts dans la section head ou body de ton projet Webflow pour qu'ils soient chargés correctement.

Exemple d’animation survol avec GSAP

Dans Webflow, tu peux créer une animation qui se déclenche au survol d’un élément. Voici un exemple en GSAP :

const filmLinks = document.querySelectorAll(".film-link"); filmLinks.forEach(link => { link.addEventListener("mouseenter", () => { gsap.to(link, { duration: 0.3, scale: 1.1, ease: "power2.out" }); }); link.addEventListener("mouseleave", () => { gsap.to(link, { duration: 0.3, scale: 1, ease: "power2.out" }); }); });

Ce script agrandit un lien au survol et lui redonne sa taille d’origine lorsque la souris quitte l’élément.

Astuce de pro : Utilise ease pour fluidifier tes animations et leur donner un rendu plus naturel (ex: ease: "power2.out"). Combine plusieurs tweens dans une timeline pour des effets encore plus percutants !

Intégrer GSAP dans Webflow

Maintenant que tu connais les bases de GSAP, voyons comment l'intégrer efficacement dans Webflow pour créer des animations avancées.

Ajouter GSAP à ton projet Webflow

Avant toute chose, il faut ajouter GSAP à Webflow en incluant son script via un CDN. Pour cela, rends-toi dans l'onglet Custom Code de ton projet et ajoute ce code dans la section head :

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js>"></script>

Si tu souhaites utiliser des plugins comme ScrollTrigger ou Draggable, ajoute-les également :

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js>"></script>

Où placer ton code GSAP dans Webflow ?

Dans de la page : Idéal pour des animations globales

Dans un embed HTML : Parfait pour cibler des éléments précis.

Dans Webflow Interactions combinées avec GSAP : Permet d’optimiser les performances en couplant GSAP avec les triggers natifs de Webflow.

Exemple d'animation d'apparition avec GSAP

Voici un script simple pour faire apparaître un élément en fondu avec un léger effet de déplacement :

gsap.from(".mon-element", { duration: 1, opacity: 0, y: 50, ease: "power2.out" });

Cet effet est très utile pour créer une transition fluide à l’arrivée sur la page.

Recommandation : Associe GSAP et les interactions Webflow pour limiter le code et améliorer la fluidité de tes animations !

Créer des animations avancées avec GSAP et Webflow

Après avoir intégré GSAP dans Webflow, il est temps de créer des animations avancées qui donneront une dimension interactive à tes projets.

Utiliser ScrollTrigger pour des effets au défilement

L'un des plugins les plus populaires de GSAP est ScrollTrigger, qui permet d'activer des animations au scroll. Voici comment créer une animation qui se déclenche lorsque l'utilisateur fait défiler la page :

// Animer un élément lorsqu'il entre dans la vue gsap.from(".mon-element", { scrollTrigger: ".mon-element", // Démarre l'animation lorsque l'élément entre dans le viewport duration: 1, opacity: 0, y: 50, ease: "power2.out" });

Tu peux aussi synchroniser plusieurs animations et jouer sur la vitesse du déclenchement.

Animations basées sur le survol

Avec GSAP, tu peux animer des éléments en fonction des interactions de l'utilisateur, comme le survol d'une image ou d'un bouton :

const bouton = document.querySelector(".mon-bouton"); bouton.addEventListener("mouseenter", () => { gsap.to(bouton, { scale: 1.2, duration: 0.3, ease: "power2.out" }); }); bouton.addEventListener("mouseleave", () => { gsap.to(bouton, { scale: 1, duration: 0.3, ease: "power2.out" }); });

Ce type d'effet est parfait pour donner du dynamisme à tes interfaces.

Animer du texte avec SplitText

Le plugin SplitText permet de fractionner un texte en lettres ou mots et de les animer individuellement :

let tl = gsap.timeline(); tl.from(".mon-texte span", { opacity: 0, y: 20, stagger: 0.05, ease: "power2.out" });

Ce type d'animation est idéal pour des titres accrocheurs ou des effets de révélation progressive.

Exemples et inspirations pour des animations GSAP x Webflow

Maintenant que tu maîtrises les bases et l'intégration de GSAP dans Webflow, voici quelques exemples d'animations que tu peux réaliser pour rendre tes sites plus dynamiques et engageants.

Effet de parallaxe au scroll

L'effet de parallaxe ajoute de la profondeur à ton site en faisant bouger des éléments à différentes vitesses lors du défilement.

gsap.to(".background", { scrollTrigger: { trigger: ".section", start: "top bottom", end: "bottom top", scrub: true }, y: -200 });

Cet effet est parfait pour créer des mises en scène immersives et attirer l'attention sur des sections clés de ton site.

Hover effect moderne sur des images

Une animation simple et élégante pour donner du dynamisme aux images.

const images = document.querySelectorAll(".image-container img"); images.forEach(img => { img.addEventListener("mouseenter", () => { gsap.to(img, { scale: 1.1, duration: 0.3, ease: "power2.out" }); }); img.addEventListener("mouseleave", () => { gsap.to(img, { scale: 1, duration: 0.3, ease: "power2.out" }); }); });

Animations de texte inspirantes

Les animations de texte apportent du dynamisme et captent l'attention de l'utilisateur. Voici un effet de révélation :

gsap.from(".texte-reveal span", { opacity: 0, y: 50, stagger: 0.1, duration: 0.8, ease: "power2.out" });

Ressources et inspirations

Si tu veux aller plus loin et explorer des animations encore plus avancées, voici quelques ressources incontournables :

GSAP Official Documentation : La référence ultime pour approfondir tes connaissances.
CodePen GSAP Collection : Des exemples concrets pour t'inspirer.
Webflow Showcase : Découvre des sites créés avec Webflow et GSAP.

Lance toi sur GSAP !

GSAP est un outil puissant qui, combiné à Webflow, permet de repousser les limites des animations web. Que ce soit pour des effets de parallaxe, des transitions interactives ou des animations complexes, GSAP offre une flexibilité et une fluidité inégalées.

En intégrant GSAP à tes projets Webflow, tu peux créer des expériences immersives et engageantes, tout en optimisant les performances de ton site. Expérimente, teste différents plugins et peaufine tes animations pour offrir à tes visiteurs une navigation unique.

‍

Les questions fréquentes

GSAP ralentit-il les performances de mon site Webflow ?

Non, bien au contraire ! GSAP est conçu pour être ultra performant et bien plus optimisé que les animations CSS classiques. Il permet d'animer des éléments de manière fluide, sans impacter le temps de chargement.

Puis-je utiliser GSAP sans savoir coder ?

Oui et non. Webflow permet déjà de créer des animations sans code, mais pour tirer parti de la puissance de GSAP, il faut connaître quelques bases en JavaScript. Heureusement, la documentation et les tutoriels rendent l’apprentissage accessible.

Quels plugins GSAP sont les plus utiles avec Webflow ?

Les plugins incontournables pour Webflow sont ScrollTrigger (animations déclenchées au scroll), SplitText (animations de texte) et Draggable (éléments interactifs glissables). Ces outils permettent d’ajouter des effets avancés sans complexifier le code.

Comment tester mes animations avant de les intégrer dans Webflow ?

Utilise CodePen ou un projet Webflow de test pour expérimenter sans risquer de casser ton design principal. GSAP propose aussi des outils comme GSDevTools pour debugger tes animations.

Où trouver des inspirations d’animations GSAP x Webflow ?

Tu peux explorer des créations sur Webflow Showcase, parcourir les collections CodePen dédiées à GSAP, ou encore consulter la documentation officielle GSAP pour découvrir des démos interactives.