GSAP 활용 방법

GSAP

오늘은 필자가 GSAP를 사용하면서 어떤 속성이 있는지 정리해보았습니다. 한번 직접 해보러 가실까요

GSAP SECTION설정

일단 섹션을 같이 만들어보도록 하겠습니다.

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

// section01
<section id="section01">
    <span class="num">01</span>
    <div class="img"></div>
</section>
// section02
<section id="section02">
    <span class="num">02</span>
    <div class="img"></div>
</section>
// section03
<section id="section03">
    <span class="num">03</span>
    <div class="img"></div>
</section>
// section04
<section id="section04">
    <span class="num">04</span>
    <div class="img"></div>
</section>
// section05
<section id="section05">
    <span class="num">05</span>
    <div class="img"></div>
</section>
// section06
<section id="section06">
    <span class="num">06</span>
    <div class="img"></div>
</section>
// section07
<section id="section07">
    <span class="num">07</span>
    <div class="img"></div>
</section>
// section08
<section id="section08">
    <span class="num">08</span>
    <div class="img"></div>
</section>
// section09
<section id="section09">
    <span class="num">09</span>
    <div class="img"></div>
</section>

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

이 코드는 GSAP(이동과 속성 애니메이션 라이브러리)의 scrollTrigger를 사용하여 스크롤에 반응하는 다양한 애니메이션 예시를 보여줍니다.

기본 애니메이션

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

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

trigger 속성 사용

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

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

toggleActions 속성 사용

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

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

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: 애니메이션이 시작하고 끝나는 스크롤 위치를 설정합니다.

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: 스크롤 속도에 따라 애니메이션 속도를 조정합니다.

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: 스크롤 이벤트에 따라 특정 클래스를 토글합니다.

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를 사용하면 스크롤 이벤트에 따라 요소의 동작을 제어할 수 있어서 웹 페이지의 인터랙티브한 기능을 구현할 때 유용합니다.