Dans cette vidéo, nous allons apprendre à créer une animation de texte inter-actif au scroll en utilisant Gsap et le plugin ScrollTrigger en utilisant le constructeur de page Elementor
Codes Gsap
Code d'installation de librairie Gsap
Pour installer la libraire Gsap sur votre site WordPress, il est recommandé de créer un thème enfant et ensuite coller ce code dans le fichier ‘fonctions.php’ du thème enfant.
function enqueue_gsap() {
// Enqueue GSAP library
wp_enqueue_script('gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js', array(), '3.10.4', true);
}
add_action('wp_enqueue_scripts', 'enqueue_gsap');
function enqueue_gsap_scrolltrigger() {
// Enqueue GSAP library
wp_enqueue_script('gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js', array(), '3.10.4', true);
// Enqueue ScrollTrigger plugin for GSAP
wp_enqueue_script('scrolltrigger', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js', array('gsap'), '3.10.4', true);
}
add_action('wp_enqueue_scripts', 'enqueue_gsap_scrolltrigger');
Code d'animation Gsap
<script>
document.addEventListener('DOMContentLoaded', function() {
// Sélectionner tous les span à l'intérieur de l'élément titre
const heroTitleSpans = document.querySelectorAll('.titrehero span');
// Vérifier si les éléments existent
if (heroTitleSpans.length > 0) {
// Initialiser ScrollTrigger
gsap.registerPlugin(ScrollTrigger);
// Animer chaque span avec un effet de décalage lors du défilement dans les deux sens
gsap.fromTo(heroTitleSpans,
{ opacity: 0, y: 50 }, // état initial
{ opacity: 1, y: 0, duration: 1, ease: 'power2.out', stagger: 0.2,
scrollTrigger: {
trigger: '.titrehero',
start: 'top 80%', // Commencer l'animation quand le titre est à 80% du viewport
end: 'bottom 40%', // Fin de l'animation quand le titre est à 20% du viewport
toggleActions: 'play reverse play reverse', // Jouer l'animation en défilement et la renverser à la montée
markers: false // Afficher des marqueurs pour le débogage (peut être enlevé en production)
}
} // état final avec décalage
);
}
});
</script>
