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 上的源代码