Introduction

 ? Bonjour les développeurs !

Bienvenue au Jour 7 de mon GSAP Journey, où j'explore les possibilités infinies des animations sur le Web. Aujourd'hui, j'ai relevé le défi de créer une animation de sélection basée sur un défilement comportant du texte dynamique et des flèches rotatives.

Grâce aux puissants outils d'animation de GSAP, nous ferons en sorte que la page réponde à la direction de défilement de l'utilisateur (vers le haut ou vers le bas) avec un mouvement et une rotation fluides. Allons-y !

Qu'est-ce que nous construisons ?️

Notre animation comprendra :

• Un chapiteau défilant de texte et d'images.
• Animations réactives qui s'ajustent en fonction de la direction de défilement.
• Flèches rotatives pour ajouter du style !

Vous pouvez voir la démo en direct ici.

Structure HTML

Voici le balisage HTML simple que j'ai utilisé :

    
    
    
    


    











  
  
  JavaScript Animation with GSAP


Here’s the GSAP-powered JavaScript code that makes the magic happen:



window.addEventListener("wheel", function (dets) { 
    if (dets.deltaY > 0) {
        // Scrolling Down
        gsap.to(".marque", {
            x: "-200%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 180
        });
    } else {
        // Scrolling Up
        gsap.to(".marque", {
            x: "0%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 0
        });
    }
});








  
  
  Comment ça marche ⚙️




Event Listener : window.addEventListener("wheel") détecte la direction de défilement.


Animations GSAP :



gsap.to() déplace le rectangle de sélection dans une direction spécifique.

La rotation des flèches ajoute une sensation dynamique et interactive.




Défilement infini : utilisation de la répétition : -1 garantit que le rectangle de sélection continue de tourner en boucle sans fin.







  
  
  Défis et enseignements


 ? Défi : La synchronisation de la direction de défilement avec le mouvement du chapiteau était délicate.


? Solution : L'API robuste de GSAP a permis d'affiner facilement les animations avec des propriétés telles que la répétition, la facilité et la durée.  





  
  
  Pensées finales


Ce projet a montré comment GSAP peut gérer les interactions basées sur le défilement et donner vie aux pages Web. Que vous travailliez sur un portfolio personnel ou sur un site Web créatif, GSAP est l'outil idéal pour créer des animations attrayantes et intuitives.  

 ? Essayez-le vous-même et partagez vos créations ! 





  
  
  Ressources




Documentation GSAP


Démo en direct


Code source sur GitHub