ScrollTrigger 이해하기: 핵심 개념 및 기능 분석

ScrollTrigger는 사용자가 페이지를 스크롤 할때 발생하는 이벤트를 바탕으로 애니메이션을 제어할 수 있다.

이 플러그인을 사용하면 스크롤 위치에 따른 다양한 트리거를 설정할 수 있으며, 효과적인 애니메이션 연출이 가능하다.

 

ScrollTrigger 주요 속성

1. trigger : 애니메이션을 실행할 요소를 지정한다.
2. start, end: 애니메이션의 시작과 끝을 스크롤 위치로 설정한다.
3. scrub : 스크롤 속도에 따라 애니메이션을 동기화한다.
4. pin : 요소를 화면에 고정하여 스크롤 동안 화면에 유지할 수 있다.
5. toggleActionss : 애니메이션의 상태를 제어한다.

gsap.to(".box", {
  x: 500,
  duration: 2,
  scrollTrigger: {
    trigger: ".box",
    start: "top 80%",
    end: "top 20%",
    scrub: true,
    pin: true,
    toggleActions: "restart pause resume reset", // 추가 설명
  }
});