GSAP) ScrollTrigger 효과주기

오늘은 GSAP(GreenSock Animation Platform)과 ScrollTrigger 플러그인을 사용하여 웹 페이지에 스크롤에 따른 다양한 애니메이션 효과를 구현하는 방법을 알아보겠습니다.
각 섹션별로 설명드리도록 할게요!

GSAP는 웹 애니메이션을 구현하기 위한 다양하고 유용한 기능들을 제공합니다. 위에서 설명한 기능들을 적절히 활용하면 웹사이트나 애플리케이션의 인터랙티브한 요소를 효과적으로 향상시킬 수 있습니다.

01: to/from

GSAP의 to() 메서드는 지정한 대상이 현재 상태에서 목표 상태로 애니메이션되게 합니다. 예를 들어, 특정 요소의 투명도를 0에서 1로 변경할 수 있습니다. 반면에 from() 메서드는 to() 메서드의 반대로 동작하며, 지정한 대상을 목표 상태에서 현재 상태로 애니메이션합니다.

        gsap.to("#section01 .img", {      //to는 시작 from은 반대
            duration: 2,
            x: 500,
            rotation: 300,
            borderRadius: 100,
        });

gsap.to() 메소드는 대상 요소의 현재 상태에서 지정된 속성으로 애니메이션을 적용합니다. 여기서는 #section01 .img 대상에 대해 2초 동안 x축으로 500px 이동, 300도 회전, borderRadius를 100px로 변경하는 애니메이션을 적용합니다.

02: Trigger

ScrollTrigger 플러그인을 사용하여 스크롤 위치에 따른 애니메이션이나 트리거를 설정할 수 있습니다. 이를 통해 사용자가 페이지를 스크롤할 때 특정 애니메이션이 활성화되도록 할 수 있습니다.

        //to는 시작 from은 반대
        gsap.to("#section02 .img", {
            duration: 2,
            x: 500,
            rotation: 360,
            borderRadius: 100,

            //화면에 보이면 바로 움직입니다.
            scrollTrigger: {
                trigger: "#section02 .img"
            }
        });

scrollTrigger 옵션을 사용하여 스크롤 위치에 따라 애니메이션이 시작되도록 합니다. trigger: “#section02 .img”는 #section02 .img 요소가 뷰포트에 진입할 때 애니메이션을 시작합니다.

03: toggleActions

ScrollTrigger와 함께 사용되며, 스크롤 진행 상황에 따라 애니메이션의 행동을 제어합니다. play, pause, resume, reverse, restart, reset, complete, none 등의 동작을 조합하여 사용할 수 있습니다.

        //03 : toggleActions : 상황별 애니메이션 처리
        gsap.to("#section03 .img", {
            duration: 2,
            x: 500,
            rotation: 360,
            borderRadius: 100,

            // onEnter, onLeave, onEnterBack, onLeaveBack
            // "play", "pause", "resume", "reset", "restart", "complete", "reverse", "none",
            scrollTrigger: {
                trigger: "#section03 .img",
                toggleActions: "play none reverse none",
            }
        });

toggleActions는 스크롤 트리거가 다양한 상황(onEnter, onLeave, onEnterBack, onLeaveBack)에 도달했을 때 어떤 액션을 취할지 정의합니다. “play none reverse none” 설정은 스크롤이 요소에 들어올 때 애니메이션을 재생하고, 뒤로 스크롤할 때 애니메이션을 역재생합니다.

04: Start, End

ScrollTrigger에서 애니메이션의 시작과 끝 위치를 정의합니다. 예를 들어, start: “top center”는 뷰포트의 상단 가운데에서 애니메이션이 시작됨을 의미합니다. end는 애니메이션이 끝나는 지점을 설정합니다.

        //04 : start, end : 애니메이션 시작, 끝 조절
        gsap.to("#section04 .img", {
            duration: 2,
            x: 500,
            rotation: 360,
            borderRadius: 100,

            scrollTrigger: {
                trigger: "#section04 .img",
                toggleActions: "play reverse none none",
                markers: false,
                start: "top 50px",
                end: "bottom 30px"
            }
        });

start와 end 옵션은 애니메이션의 시작과 끝 위치를 정의합니다. 예를 들어, start: “top 50px”는 트리거 요소의 상단이 뷰포트 상단으로부터 50px 아래에 도달했을 때 애니메이션을 시작합니다.

05: Scrub

ScrollTrigger의 옵션 중 하나로, 스크롤 동작에 애니메이션을 연동시키는 기능입니다. 사용자가 스크롤할 때 애니메이션이 실시간으로 업데이트되어 부드러운 인터랙션을 만듭니다.

        //05 : scrub : 내가 스크롤 한 만큼만 움직입니다.
        gsap.to("#section05 .img", {
            duration: 2,
            x: 500,
            rotation: 360,
            borderRadius: 100,

            scrollTrigger: {
                trigger: "#section05 .img",
                markers: false,
                start: "top 50%",
                end: "bottom 10%",
                scrub: true    //  true  | number
            }
        });

scrub: true는 스크롤 동작에 애니메이션 속도를 동기화시킵니다. 즉, 사용자가 스크롤을 멈추면 애니메이션도 멈춥니다. 숫자 값을 주면, 그 값만큼의 지연 시간(delay)을 갖게 됩니다.

06: Pin

ScrollTrigger에서 사용되며, 특정 요소를 스크롤 동안 고정시키는 기능입니다. 이를 통해 사용자가 페이지를 스크롤하는 동안 요소가 화면에 고정되어 있게 할 수 있습니다.

        // 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,
                markers: false,
            }
        });

pin: true는 지정된 요소를 스크롤 동안 고정시키는 효과를 적용합니다. 사용자가 스크롤을 계속해도 해당 요소는 화면에 고정되어 있습니다.

07: toggleClass

ScrollTrigger와 함께 사용하여, 스크롤 위치에 따라 특정 요소에 클래스를 추가하거나 제거할 수 있습니다. 이를 통해 CSS를 이용한 다양한 스타일 변화를 적용할 수 있습니다.

        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",
                markers: false,
                id: "box7",
            }
        });

toggleClass: “active”는 스크롤 트리거가 활성화될 때 지정된 요소에 클래스를 추가하거나 제거합니다. 이를 통해 CSS를 사용하여 추가적인 스타일 변화를 줄 수 있습니다.

08: Callback

애니메이션의 특정 시점에 사용자 정의 함수를 실행할 수 있는 기능입니다. 예를 들어, 애니메이션이 완료되었을 때 특정 작업을 실행하도록 설정할 수 있습니다.

        //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,
                markers: true,
                // onEnter: () => { console.log("onEnter") },
                // onLeave: () => { console.log("onLeave") },
                // onEnterBack: () => { console.log("onEnterBack") },
                // onLeaveBack: () => { console.log("onLeaveBack") },
                onUpdate: (self) => { console.log("onUpdate", self.progress.toFixed(3)) },
                ontoggle: (self) => { console.log("onToggle", self.progress.isActive) },
            }
        });

onUpdate, ontoggle와 같은 콜백 함수를 사용하여 애니메이션의 특정 시점에 추가적인 작업을 수행할 수 있습니다. 예를 들어, onUpdate는 애니메이션이 업데이트될 때마다 호출되며, self.progress.toFixed(3)를 통해 애니메이션 진행 상황을 콘솔에 로그로 남깁니다. 이러한 각 옵션과 메소드를 조합하여 다양한 스크롤 기반 애니메이션을 구현할 수 있으며, 사용자 경험을 풍부하게 만드는 데 큰 도움이 됩니다.