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ément
gsap.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 });
gsap.fromTo(".mon-element", { opacity: 0, x: -100 }, { duration: 1, opacity: 1, x: 100 });
let 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 :
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.
