Intégrer des animations avec GSAP dans WordPress : Guide Complet

8 février 2025

Temps de lecture estimé : 5 min

L’animation joue un rôle essentiel dans l’expérience utilisateur moderne sur le web. Une page dynamique et fluide capte l’attention et engage davantage les visiteurs. Si vous utilisez WordPress et que vous souhaitez ajouter des animations performantes, GSAP (GreenSock Animation Platform) est l’outil idéal. Il permet de créer des animations complexes tout en garantissant des performances optimales.

Dans cet article, nous allons explorer comment intégrer GSAP dans WordPress, en passant par l’installation, les bases de l’animation et des exemples concrets pour améliorer l’interactivité de votre site.

Pourquoi utiliser GSAP dans WordPress ?

GSAP est une bibliothèque JavaScript ultra-puissante qui permet d’animer des éléments HTML, CSS, SVG et même WebGL. Comparé à d’autres solutions comme CSS animations ou jQuery.animate(), GSAP offre :

✅ Des performances exceptionnelles : Il est optimisé pour les navigateurs et garantit des effets fluides, même sur mobile.
✅ Une compatibilité maximale : Fonctionne parfaitement sur tous les navigateurs récents.
✅ Un contrôle avancé : Permet de créer des séquences complexes, gérer des timelines et des effets conditionnelles.
✅ Une intégration facile avec WordPress : Compatible avec Elementor, Divi, Gutenberg et d’autres constructeurs de pages.

Ajouter GSAP à votre site WordPress

Il existe plusieurs façons d’ajouter GSAP à WordPress : via un CDN, via un plugin, ou en l’incluant manuellement dans votre thème.

🔹 Méthode 1 : Utiliser un CDN (Facile et Rapide)

La manière la plus simple d’ajouter GSAP est d’utiliser un CDN et d’insérer le script dans votre fichier functions.php :

function ajouter_gsap() {
wp_enqueue_script(‘gsap’, ‘https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js’, array(), null, true);
wp_enqueue_script(‘gsap-scrolltrigger’, ‘https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js’, array(‘gsap’), null, true);
}
add_action(‘wp_enqueue_scripts’, ‘ajouter_gsap’);

👉 Pourquoi ?

wp_enqueue_script() charge GSAP de manière sécurisée et optimisée.
true à la fin permet de charger le script dans le footer pour de meilleures performances.

🔹 Méthode 2 : Ajouter GSAP via un Plugin

Si vous ne souhaitez pas toucher au code, vous pouvez utiliser un plugin comme WPCode Snippets ou Custom Scripts pour ajouter GSAP dans l’en-tête ou le pied de page.

🔹 Méthode 3 : Inclure GSAP en local

Si vous préférez un contrôle total, vous pouvez télécharger GSAP sur le site officiel et l’ajouter dans votre dossier de thème (/wp-content/themes/votre-theme/js/), puis l’appeler via :

function ajouter_gsap_local() {
wp_enqueue_script(‘gsap-local’, get_template_directory_uri() . ‘/js/gsap.min.js’, array(), null, true);
}
add_action(‘wp_enqueue_scripts’, ‘ajouter_gsap_local’);

Les Bases de GSAP pour WordPress

GSAP fonctionne en animant des éléments du DOM avec une syntaxe simple et efficace.

✅ Exemple 1 : Animation de base

Ajoutez ce code dans un fichier JavaScript (animation.js) et chargez-le dans WordPress :

document.addEventListener(« DOMContentLoaded », function() {
gsap.from(« .mon-titre », { opacity: 0, y: -50, duration: 1 });
});

Explication :

.mon-titre apparaît progressivement avec un mouvement vers le bas.
opacity: 0 rend l’élément invisible au départ.
y: -50 le fait descendre de 50 pixels.
duration: 1 signifie que l’effet dure 1 seconde.

Ajoutez ensuite ce script dans functions.php pour l’inclure :

function ajouter_animation_gsap() {
wp_enqueue_script(‘custom-gsap’, get_template_directory_uri() . ‘/js/animation.js’, array(‘gsap’), null, true);
}
add_action(‘wp_enqueue_scripts’, ‘ajouter_animation_gsap’);

Exemple 2 : Effet de Révélation au Scroll (ScrollTrigger)

Le plugin ScrollTrigger de GSAP permet de déclencher des effets en fonction du défilement de la page.

gsap.registerPlugin(ScrollTrigger);

gsap.from(« .section-reveal », {
scrollTrigger: {
trigger: « .section-reveal »,
start: « top 80% »,
toggleActions: « play none none reverse »
},
opacity: 0,
y: 50,
duration: 1.5
});

Ce que ça fait :

Lorsque .section-reveal entre dans le viewport, elle s’anime.
start: "top 80%" signifie que l’effet commence quand le haut de l’élément atteint 80% de la fenêtre.
toggleActions: "play none none reverse" permet de rejouer l’effet en scrollant vers le haut.

Ajoutez la classe section-reveal à vos blocs WordPress pour voir l’effet en action.

Intégrer avec Elementor et Gutenberg

🎨 Utiliser avec Elementor

Si vous utilisez Elementor, vous pouvez ajouter du code JavaScript personnalisé dans l’onglet « Custom Code ».

Ajoutez via un CDN dans Elementor > Custom Code.
Ajoutez un code d’animation en fonction des classes CSS appliquées à vos éléments.

Exemple pour animer un bouton Elementor :

document.addEventListener(« DOMContentLoaded », function() {
gsap.to(« .elementor-button », { scale: 1.1, duration: 0.5, repeat: -1, yoyo: true });
});

Optimisation et Meilleures Pratiques

✅ Chargez GSAP uniquement quand nécessaire
Si vous utilisez GSAP sur une seule page, chargez-le conditionnellement :

function charger_gsap_seulement_si_necessaire() {
if (is_page(‘animation-page’)) {
wp_enqueue_script(‘gsap’, ‘https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js’, array(), null, true);
}
}
add_action(‘wp_enqueue_scripts’, ‘charger_gsap_seulement_si_necessaire’);

Utilisez la Timeline pour des animations en séquence
Au lieu de déclencher plusieurs effets séparément, enchaînez-les avec une timeline :

let tl = gsap.timeline();
tl.from(« .titre », { opacity: 0, y: -50, duration: 1 })
.from(« .sous-titre », { opacity: 0, y: -30, duration: 0.8 }, « -=0.5 »)
.from(« .bouton », { opacity: 0, scale: 0.5, duration: 0.5 }, « -=0.3 »);

Testez vos animations sur mobile
Utilisez matchMedia() pour adapter les animations aux écrans mobiles :

gsap.matchMedia().add(« (max-width: 768px) », () => {
gsap.to(« .image », { x: 50, duration: 1 });
});

Conclusion

L’intégration de GSAP dans WordPress est un excellent moyen de dynamiser votre site et d’améliorer l’expérience utilisateur. Que ce soit pour des effets simples ou des effets avancés avec ScrollTrigger, GSAP offre une flexibilité incomparable.

📌 À retenir :

GSAP est puissant et performant.
Il s’intègre facilement à WordPress, Elementor et Gutenberg.
Il permet des effets avancées avec une syntaxe claire.

Prêt à transformer votre site WordPress avec des animations captivantes ? Testez GSAP dès aujourd’hui !