소개

? 안녕하세요 개발자 여러분!

웹에서 애니메이션의 무한한 가능성을 탐색하는 GSAP 여정의 7일차에 오신 것을 환영합니다. 오늘 저는 동적 텍스트와 회전하는 화살표가 특징인 대화형 스크롤 기반 선택 윤곽 애니메이션을 만드는 도전에 나섰습니다.

GSAP의 강력한 애니메이션 도구를 사용하면 페이지가 사용자 스크롤 방향(위 또는 아래)에 원활하게 반응하고 회전하도록 만들 수 있습니다. 뛰어 들어보세요!

우리는 무엇을 만들고 있나요?️

애니메이션에는 다음이 포함됩니다.

• 텍스트와 이미지의 스크롤 선택 윤곽입니다.
• 스크롤 방향에 따라 조정되는 반응형 애니메이션입니다.
• 화살표를 회전시켜 감각을 더해보세요!

여기에서 라이브 데모를 볼 수 있습니다.

HTML 구조

다음은 제가 사용한 간단한 HTML 마크업입니다:

    
    
    
    


    











  
  
  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()는 선택 윤곽을 특정 방향으로 이동합니다.

화살표의 회전은 역동적이고 상호작용적인 느낌을 더해줍니다.




무한 스크롤: 반복 사용: -1은 선택 윤곽이 끝없이 반복되도록 합니다.







  
  
  도전과 학습


? 과제: 선택 윤곽 이동과 스크롤 방향을 동기화하는 것은 까다로웠습니다.


? 해결책: GSAP의 강력한 API를 사용하면 반복, 용이함, 지속 시간과 같은 속성을 사용하여 애니메이션을 쉽게 미세 조정할 수 있습니다.  





  
  
  최종 생각


이 프로젝트는 GSAP가 스크롤 기반 상호작용을 처리하고 웹페이지에 생명을 불어넣는 방법을 보여주었습니다. 개인 포트폴리오 작업을 하든 창의적인 웹사이트 작업을 하든 GSAP는 매력적이고 직관적인 애니메이션을 만드는 완벽한 도구입니다.  

? 직접 시도하고 창작물을 공유하세요! 





  
  
  자원




GSAP 문서


라이브 데모


GitHub의 소스 코드