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
        });
    }
});



  
  
  它是如何運作的⚙️




事件監聽器：window.addEventListener("wheel") 偵測滾動方向。


GSAP 動畫：



gsap.to() 將選取框朝特定方向移動。

箭頭的旋轉增添了動態、互動的感覺。




無限滾動：使用repeat: -1確保選取框不斷循環。







  
  
  挑戰與經驗教訓


？ 
挑戰：將捲動方向與選取框移動同步很棘手。 

？ 
解決方案：GSAP 強大的 API 可以輕鬆地透過重複、輕鬆和持續時間等屬性來微調動畫。  





  
  
  最後的想法


該專案展示了 GSAP 如何處理
基於滾動的互動並使網頁栩栩如生。無論您是在製作個人作品集還是創意網站，GSAP 都是讓動畫引人入勝且直觀的完美工具。  

？ 
親自嘗試並分享您的創作！  





  
  
  資源




GSAP 文件


現場演示


GitHub 上的原始碼