'GSAP 둘째 날: 회전하는 화살표가 있는 대화형 스크롤 애니메이션'

소개

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

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

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

---

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

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

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

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

---

HTML 구조

제가 사용한 간단한 HTML 마크업은 다음과 같습니다.

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day-7 Scrolling Text Animation</title>
    <link rel="stylesheet" href="style.css">


    <div>




<hr>


<hr>

<h3>
  
  
  JavaScript Animation with GSAP
</h3>

<p>Here’s the GSAP-powered JavaScript code that makes the magic happen:<br>
</p>

<pre class="brush:php;toolbar:false">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
        });
    }
});

---

작동 방식 ⚙️

1. 이벤트 리스너: window.addEventListener("wheel")는 스크롤 방향을 감지합니다.
2. GSAP 애니메이션:
   • gsap.to()는 선택 윤곽을 특정 방향으로 이동합니다.
   • 화살표의 회전은 역동적이고 상호작용적인 느낌을 더해줍니다.
3. 무한 스크롤: 반복 사용: -1을 사용하면 선택 윤곽이 끝없이 반복됩니다.

---

도전과 학습

? 과제: 스크롤 방향과 마키 이동을 동기화하는 것이 까다로웠습니다.

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

---

최종 생각

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

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

---

자원

• GSAP 문서
• 라이브 데모
• GitHub의 소스 코드

---