GSAP) Parallax 효과주기

Posted May 3, 2024 Updated May 14, 2024

By parksohyunnn 22 min read

오늘은 웹 페이지에서 스크롤에 따른 애니메이션 효과를 구현하기 위해 GSAP (GreenSock Animation Platform) 및 그의 ScrollTrigger 플러그인을 사용하는 방법을 알아보도록 하겠습니다. 각 섹션마다 다른 애니메이션 효과가 적용되어 있습니다. 자세히 설명해드리겠습니다.

ScrollTrigger는 GSAP (GreenSock Animation Platform)의 플러그인으로 스크롤에 따른 애니메이션을 구현할 때 사용됩니다. 여기서 언급한 기능들은 ScrollTrigger와 관련된 다양한 옵션들입니다. 각각을 한국어로 설명하겠습니다.

1. to from

o 및 from: to 및 from 메서드는 각각 요소의 시작 및 종료 상태를 정의하여 애니메이션을 만듭니다. to 메서드는 요소를 특정 상태로 애니메이션화하고, from 메서드는 요소를 특정 상태에서 다른 상태로 애니메이션화합니다.

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

이 코드는 GSAP의 to 메서드를 사용하여 #section01 .img 요소에 애니메이션을 적용하는 예시입니다. 여기서 각각의 속성은 다음을 의미합니다:

duration: 애니메이션의 지속 시간을 설정합니다. 이 예제에서는 2초 동안 애니메이션이 진행됩니다.
x: 요소를 x축 방향으로 이동시키는 속성입니다. 여기서는 500픽셀만큼 오른쪽으로 이동합니다.
rotation: 요소를 회전시키는 속성입니다. 여기서는 시계방향으로 300도 회전합니다.
borderRadius: 요소의 모서리를 둥글게 만드는 속성입니다. 여기서는 100픽셀의 반경으로 모서리를 만듭니다.
이 코드를 실행하면 #section01 .img 요소가 오른쪽으로 500픽셀 이동하고, 시계방향으로 300도 회전하며, 모서리가 둥글게 변경되는 애니메이션이 2초 동안 재생됩니다. 이는 GSAP를 사용하여 요소에 대한 다양한 유형의 애니메이션을 쉽게 만들 수 있는 방법 중 하나를 보여줍니다.
2. trigger
“trigger”는 GSAP에서 사용되는 용어 중 하나로, 특정 이벤트가 발생할 때 애니메이션을 시작하거나 제어하는 데 사용됩니다. 이것은 일반적으로 마우스 클릭, 마우스 오버, 스크롤, 시간 기반 이벤트 등과 같은 사용자 인터랙션 또는 요소의 특정 상태 변화에 반응하여 애니메이션을 시작하는 데 사용됩니다.

예를 들어, 특정 요소를 마우스 오버했을 때 해당 요소가 확대되는 애니메이션을 만들고 싶다면, 마우스 오버 이벤트를 “trigger”로 설정하여 해당 애니메이션을 시작할 수 있습니다. 이벤트가 발생하면 GSAP는 지정된 애니메이션을 시작하고, 필요에 따라 해당 요소의 상태를 변경할 수 있습니다.

“trigger”는 GSAP의 애니메이션을 제어하는 강력한 도구 중 하나이며, 사용자 인터랙션에 반응하여 동적이고 흥미로운 웹 애니메이션을 만드는 데 중요한 역할을 합니다.

  
//02 : trigger
gsap.to("#section02 .img", {
    duration: 2,
    x: 500,
    rotation: 360,
    borderRadius: 100,

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

이 코드는 GSAP의 to 메서드를 사용하여 #section02 .img 요소에 애니메이션을 적용하고, scrollTrigger를 사용하여 화면에 요소가 보이면 애니메이션을 시작하는 예시입니다. 여기서 추가된 부분은 다음과 같습니다:

scrollTrigger: 이 속성은 ScrollTrigger 플러그인을 사용하여 스크롤에 반응하는 트리거를 설정합니다.
trigger: 트리거로 사용될 요소를 지정합니다. 이 경우 #section02 .img 요소가 트리거로 설정되었습니다.
이 코드를 실행하면 #section02 .img 요소에 대한 애니메이션이 적용되며, 사용자가 해당 요소로 스크롤할 때 애니메이션이 시작됩니다. 스크롤이 해당 요소를 보이게 만들면 애니메이션이 자동으로 시작됩니다. 이를 통해 사용자가 특정 요소를 스크롤하여 뷰포트에 나타나는 것을 감지하고 애니메이션을 자동으로 시작할 수 있습니다.

3. toggleActions

toggleActions: 이 메서드는 스크롤 애니메이션을 위해 사용됩니다. 요소가 화면에 표시되는 동안 또는 사라지는 동안 발생하는 특정 동작을 지정할 수 있습니다.

  
//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",
    }
});

이 코드는 GSAP의 to 메서드를 사용하여 #section03 .img 요소에 애니메이션을 적용하고, scrollTrigger를 사용하여 화면에 요소가 보이면 애니메이션을 시작하고, 특정 상황에 따라 다른 애니메이션 동작을 설정하는 예시입니다. 여기서 추가된 부분은 다음과 같습니다:

toggleActions: 이 속성은 ScrollTrigger 플러그인을 사용하여 특정 상황에서 어떤 동작을 취할지를 설정합니다. 여기서 사용된 값은 “play none reverse none”입니다.
play: 요소가 뷰포트에 진입할 때 애니메이션을 재생합니다.
none: 요소가 뷰포트를 벗어날 때 애니메이션을 중지하지 않고 유지합니다.
reverse: 요소가 뷰포트를 벗어날 때 애니메이션을 역으로 되감습니다.

이 코드를 실행하면 #section03 .img 요소에 대한 애니메이션이 적용되고, 사용자가 해당 요소로 스크롤할 때 애니메이션이 시작됩니다. 그리고 스크롤을 통해 요소가 뷰포트에서 나타나거나 사라질 때 애니메이션의 동작이 결정됩니다. 따라서 요소가 화면에 나타나면 애니메이션을 재생하고, 화면에서 사라지면 애니메이션을 역으로 되감거나 유지합니다.

4. start, end

start 및 end: start 및 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"
    }
});

이 코드는 GSAP의 to 메서드를 사용하여 #section04 .img 요소에 애니메이션을 적용하고, scrollTrigger를 사용하여 화면에 요소가 보이면 애니메이션을 시작하고, 특정 스크롤 위치에서 애니메이션을 시작 및 종료하도록 설정하는 예시입니다. 여기서 추가된 부분은 다음과 같습니다:

start: 애니메이션을 시작할 스크롤 위치를 지정합니다. 이 예제에서는 화면의 맨 위에서부터 50픽셀 아래로 스크롤될 때 애니메이션이 시작됩니다.
end: 애니메이션을 종료할 스크롤 위치를 지정합니다. 이 예제에서는 화면의 맨 아래에서부터 30픽셀 위로 스크롤될 때 애니메이션이 종료됩니다.

이 코드를 실행하면 #section04 .img 요소에 대한 애니메이션이 적용되고, 사용자가 해당 요소로 스크롤할 때 애니메이션이 시작됩니다. 또한, 화면의 스크롤 위치에 따라 애니메이션이 시작 및 종료됩니다. 스크롤이 시작 위치인 화면의 맨 위에서 50픽셀 아래로 이동하면 애니메이션이 시작되고, 종료 위치인 화면의 맨 아래에서 30픽셀 위로 이동하면 애니메이션이 종료됩니다.

5. scrub

scrub: 이것은 스크럽 애니메이션에 사용됩니다. 사용자가 애니메이션을 스크롤하면 해당 위치에 따라 애니메이션의 진행 상황이 조절됩니다.

  
//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
    }
});

이 코드는 GSAP의 to 메서드를 사용하여 #section05 .img 요소에 애니메이션을 적용하고, scrollTrigger를 사용하여 화면에 요소가 보이면 애니메이션을 시작하고, 스크롤에 따라 애니메이션이 일어나는 정도를 조절하는 예시입니다. 여기서 추가된 부분은 다음과 같습니다:

scrub: 이 속성은 스크롤에 따라 애니메이션이 일어나는 정도를 조절합니다. 이 예제에서는 true로 설정되어 있으므로 스크롤에 따라 애니메이션이 부드럽게 진행됩니다.
true: 스크롤 위치에 따라 애니메이션이 부드럽게 진행됩니다.

이 코드를 실행하면 #section05 .img 요소에 대한 애니메이션이 적용되고, 사용자가 해당 요소로 스크롤할 때 애니메이션이 시작됩니다. scrub 속성이 true로 설정되어 있으므로 사용자가 스크롤하는 동안 애니메이션은 부드럽게 진행되며, 스크롤한 만큼만 요소가 이동하고 회전합니다. 설정된 시작 및 종료 위치에 따라 애니메이션이 시작 및 종료됩니다.

6. pin

pin: 요소를 화면에 고정시키는 기능을 제공합니다. 일반적으로 스크롤 애니메이션에서 사용되며, 요소가 화면을 벗어나는 경우에도 요소를 화면에 고정시킬 수 있습니다.

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

이 코드는 GSAP의 to 메서드를 사용하여 #section06 .img 요소에 애니메이션을 적용하고, scrollTrigger를 사용하여 화면에 요소가 보이면 애니메이션을 시작하고, 스크롤에 따라 애니메이션이 고정되는 예시입니다. 여기서 추가된 부분은 다음과 같습니다:

pin: 이 속성은 해당 요소를 스크롤하는 동안 고정시킵니다. 이 예제에서는 true로 설정되어 있으므로 요소가 스크롤되는 동안 고정됩니다.
true: 요소가 스크롤하는 동안 고정됩니다.

이 코드를 실행하면 #section06 .img 요소에 대한 애니메이션이 적용되고, 사용자가 해당 요소로 스크롤할 때 애니메이션이 시작됩니다. 설정된 시작 및 종료 위치에 따라 애니메이션이 시작 및 종료됩니다. 또한, pin 속성이 true로 설정되어 있으므로 요소가 스크롤하는 동안 고정되어 화면에 고정되어 나타납니다.

7. toggleClass

toggleClass: 이 메서드는 요소에 클래스를 토글하는 데 사용됩니다. 일반적으로 특정 이벤트에 반응하여 클래스를 추가하거나 제거하는 데 사용됩니다.

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

이 코드는 GSAP의 to 메서드를 사용하여 #section07 .img 요소에 애니메이션을 적용하고, scrollTrigger를 사용하여 화면에 요소가 보이면 애니메이션을 시작하고, 스크롤에 따라 클래스를 토글하는 예시입니다. 여기서 추가된 부분은 다음과 같습니다:

toggleClass: 이 속성은 스크롤 위치에 따라 특정 클래스를 토글합니다. 이 예제에서는 스크롤이 시작 위치인 화면의 중앙에서부터 아래로 이동할 때 #section07 .img 요소에 active 클래스가 토글됩니다.

이 코드를 실행하면 #section07 .img 요소에 대한 애니메이션이 적용되고, 사용자가 해당 요소로 스크롤할 때 애니메이션이 시작됩니다. 설정된 시작 및 종료 위치에 따라 애니메이션이 시작 및 종료됩니다. 또한, 스크롤 위치에 따라 active 클래스가 토글되어 요소의 스타일을 변경할 수 있습니다.

8. callback

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) },
    }
});

이 코드는 GSAP의 to 메서드를 사용하여 #section08 .img 요소에 애니메이션을 적용하고, scrollTrigger를 사용하여 화면에 요소가 보이면 애니메이션을 시작하고, 스크롤에 따라 콜백 함수를 호출하는 예시입니다. 여기서 추가된 부분은 다음과 같습니다:

onUpdate: 이 콜백 함수는 애니메이션이 업데이트될 때 호출됩니다. 여기서는 self.progress.toFixed(3)를 통해 현재 애니메이션 진행률을 콘솔에 출력합니다.
ontoggle: 이 콜백 함수는 트리거가 활성화되거나 비활성화될 때 호출됩니다. 여기서는 self.progress.isActive를 통해 트리거가 활성화되어 있는지 여부를 콘솔에 출력합니다.

이 코드를 실행하면 #section08 .img 요소에 대한 애니메이션이 적용되고, 사용자가 해당 요소로 스크롤할 때 애니메이션이 시작됩니다. 설정된 시작 및 종료 위치에 따라 애니메이션이 시작 및 종료됩니다. 또한, 애니메이션의 진행률이 업데이트될 때마다 콘솔에 현재 진행률이 출력되고, 트리거가 활성화되거나 비활성화될 때마다 해당 상태가 콘솔에 출력됩니다.

이러한 기능을 조합하여 다양한 유형의 웹 애니메이션을 만들 수 있습니다.

GSAP

git github

This post is licensed under CC BY 4.0 by the author.