GSAP 실전 활용 예시 간단 정리01

안녕하세요. 오늘은 필자가 GSAP를 사용하면서 어떤 속성이 있는지 조금 정리해본 글입니다.

포스팅에 앞서 필자도 부족한 부분이 많으니 양해 부탁드립니다.

아래의 HTML 코드는 여러 섹션(section) 요소를 포함하고 있습니다. 각 섹션은 고유한 ID를 가지고 있고, 각 섹션 내에는 숫자(num)와 이미지(img) 요소가 포함되어 있습니다. 각 섹션은 다음과 같이 구성되어 있습니다:

1. section01

   <section id="section01">
       <span class="num">01</span>
       <div class="img"></div>
   </section>
   

2. section02

   <section id="section02">
       <span class="num">02</span>
       <div class="img"></div>
   </section>
   

3. section03

   <section id="section03">
       <span class="num">03</span>
       <div class="img"></div>
   </section>
   

4. section04

   <section id="section04">
       <span class="num">04</span>
       <div class="img"></div>
   </section>
   

5. section05

   <section id="section05">
       <span class="num">05</span>
       <div class="img"></div>
   </section>
   

6. section06

   <section id="section06">
       <span class="num">06</span>
       <div class="img"></div>
   </section>
   

7. section07

   <section id="section07">
       <span class="num">07</span>
       <div class="img"></div>
   </section>
   

8. section08

   <section id="section08">
       <span class="num">08</span>
       <div class="img"></div>
   </section>
   

9. section09

   <section id="section09">
       <span class="num">09</span>
       <div class="img"></div>
   </section>
   

각 섹션은 고유한 ID로 식별되며, span 요소(num)은 해당 섹션의 번호를 나타내고, div 요소(img)는 이미지를 표시할 수 있는 빈 요소입니다. 이러한 구조를 통해 각 섹션에 대해 다양한 스타일이나 동작을 적용할 수 있습니다.

아래 코드는 GSAP(이동과 속성 애니메이션 라이브러리)의 scrollTrigger를 사용하여 스크롤에 반응하는 다양한 애니메이션 예시를 보여줍니다. 각 예시에 대한 설명은 다음과 같습니다:

01. 기본 애니메이션

gsap.to("#section01 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100
});

• duration: 애니메이션의 지속 시간 (2초)
• x: x축 방향으로 500px만큼 이동
• rotation: 요소를 360도 회전
• borderRadius: 요소의 모서리를 원형으로 변경

02. trigger 속성 사용

gsap.to("#section02 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: "#section02 .img"
    }
});

• scrollTrigger: 스크롤 트리거를 추가하여 특정 요소가 보이면 애니메이션을 실행합니다.

03. toggleActions 속성 사용

gsap.to("#section03 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: "#section03 .img",
        toggleActions: "play none reverse none"
    }
});

• toggleActions: 스크롤 이벤트에 대한 애니메이션 행동을 설정합니다.

04. start 및 end 속성 사용

gsap.to("#section04 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: "#section04 .img",
        toggleActions: "play none reverse none",
        start: "top 45%",
        end: "bottom 55%"
    }
});

• start와 end: 애니메이션이 시작하고 끝나는 스크롤 위치를 설정합니다.

05. scrub 속성 사용

gsap.to("#section05 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: "#section05 .img",
        start: "top 50%",
        end: "bottom 10%",
        scrub: 3.5
    }
});

• scrub: 스크롤 속도에 따라 애니메이션 속도를 조정합니다.

06. pin 속성 사용

gsap.to("#section06 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: "#section06 .img",
        start: "top 50%",
        end: "bottom 200px",
        scrub: true,
        pin: true
    }
});

• pin: 요소를 스크롤에 고정시킵니다.

07. toggleClass 속성 사용

gsap.to("#section07 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: "#section07 .img",
        start: "top center",
        end: "bottom 200px",
        scrub: true,
        toggleClass: "active"
    }
});

• toggleClass: 스크롤 이벤트에 따라 특정 클래스를 토글합니다.

08. callback 함수 사용

gsap.to("#section08 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,
    scrollTrigger: {
        trigger: "#section08 .img",
        start: "top center",
        end: "bottom 200px",
        scrub: true,
        onUpdate: (self) => { console.log("onUpdate", self.progress.toFixed(3)) },
        onToggle: (self) => { console.log("onToggle", self.isActive) }
    }
});

• onUpdate: 애니메이션 업데이트 시 실행되는 콜백 함수
• onToggle: 트리거 상태 변경 시 실행되는 콜백 함수

각 예시는 스크롤 트리거와 함께 요소에 다양한 애니메이션을 적용하는 방법을 보여줍니다. scrollTrigger를 사용하면 스크롤 이벤트에 따라 요소의 동작을 제어할 수 있어서 웹 페이지의 인터랙티브한 기능을 구현할 때 유용합니다.

오늘도 필자의 부족한 글 읽어주셔서 감사합니다.