GSAP의 ScrollTrigger 속성과 활용 예시

안녕하세요. 오늘은 필자가 GSAP를 사용하면서 정리한 글입니다.

GSAP의 ScrollTrigger는 스크롤 이벤트를 기반으로 요소의 애니메이션을 트리거하고 제어하는 강력한 도구입니다. 다양한 속성을 사용하여 스크롤에 반응하는 멋진 애니메이션을 구현할 수 있습니다.

주요 속성

1. trigger
   • 애니메이션을 트리거할 요소를 지정합니다. CSS 선택자 혹은 요소 자체를 사용할 수 있습니다.
2. start
   • 트리거가 작동할 스크롤 위치를 지정합니다. 주로 "top 50%", "bottom 30px"와 같은 방식으로 사용됩니다.
3. end
   • 애니메이션의 종료 지점을 설정합니다. 주로 "bottom top"과 같은 방식으로 사용됩니다.
4. toggleActions
   • 트리거가 활성화되거나 비활성화될 때 애니메이션 동작을 제어합니다. "play", "pause", "resume", "reset", "restart", "complete", "reverse" 등의 옵션이 있습니다.
5. scrub
   • true로 설정하면 스크롤 이벤트에 따라 애니메이션이 부드럽게 진행됩니다. 특히 요소의 위치를 스크롤에 맞춰 정확히 조절할 때 유용합니다.
6. pin
   • 요소를 스크롤 동안 고정시킵니다. 스크롤하는 동안 요소가 화면에 고정되어 보이고, 특정 스크롤 범위에서 해제될 수 있습니다.

ScrollTrigger 활용 예시

1. 요소 이동 애니메이션

   gsap.to(".element", {
       x: 300,
       opacity: 1,
       duration: 1,
       scrollTrigger: {
           trigger: ".element",
           start: "top 80%",
           end: "top 20%",
           toggleActions: "play none none none"
       }
   });
   

2. 요소 확대 및 회전 애니메이션

   gsap.to(".element", {
       scale: 1.5,
       rotation: 360,
       duration: 1,
       scrollTrigger: {
           trigger: ".element",
           start: "top 50%",
           end: "bottom 50%",
           scrub: true
       }
   });
   

3. 요소 고정 및 해제 애니메이션

   gsap.to(".element", {
       y: 500,
       duration: 1,
       scrollTrigger: {
           trigger: ".element",
           start: "top 50%",
           end: "bottom 50%",
           pin: true,
           markers: true
       }
   });
   

4. 요소 투명도 조절 애니메이션

   gsap.to(".element", {
       opacity: 0,
       duration: 1,
       scrollTrigger: {
           trigger: ".element",
           start: "top 80%",
           end: "top 50%",
           toggleActions: "play reverse play reverse"
       }
   });
   

5. 요소 배경색 변경 애니메이션

   gsap.to(".element", {
       backgroundColor: "#ff6347",
       duration: 1,
       scrollTrigger: {
           trigger: ".element",
           start: "top 50%",
           end: "bottom 50%",
           scrub: true
       }
   });
   

6. 요소 스크롤에 따른 순차적 애니메이션

   gsap.from(".element", {
       opacity: 0,
       y: 100,
       duration: 1,
       stagger: 0.2,
       scrollTrigger: {
           trigger: ".element",
           start: "top 80%",
           end: "top 50%",
           toggleActions: "play reverse play reverse"
       }
   });
   

7. 배경 이미지 위치 변경 애니메이션

   gsap.to(".background", {
       backgroundPositionY: "50%",
       duration: 1,
       scrollTrigger: {
           trigger: ".background",
           start: "top 50%",
           end: "bottom 50%",
           scrub: true
       }
   });
   

8. 요소 회전 및 크기 조절 애니메이션

   gsap.to(".element", {
       rotation: 180,
       scale: 0.5,
       duration: 1,
       scrollTrigger: {
           trigger: ".element",
           start: "top 50%",
           end: "bottom 50%",
           scrub: true
       }
   });
   

9. 텍스트 색상 변경 애니메이션

   gsap.to(".text", {
       color: "#ff0000",
       duration: 1,
       scrollTrigger: {
           trigger: ".text",
           start: "top 50%",
           end: "bottom 50%",
           scrub: true
       }
   });
   

10. 요소 사라짐 애니메이션

    gsap.to(".element", {
        opacity: 0,
        duration: 1,
        scrollTrigger: {
            trigger: ".element",
            start: "top 80%",
            end: "top 50%",
            toggleActions: "play reverse play reverse"
        }
    });
    

위 예시는 ScrollTrigger를 사용하여 요소의 위치, 크기, 투명도, 회전, 배경색 등을 스크롤 위치에 따라 동적으로 제어하는 방법을 보여주고 있습니다. ScrollTrigger는 다양한 옵션을 제공하여 웹 페이지에 멋진 인터랙티브 애니메이션을 추가할 수 있습니다.

더 많은 속성과 예시가 있지만 다음에 조금더 정리해보도록 하겠습니다.

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