ScrollTrigger로 요소를 부드럽게 움직이는 방법

 

ScrollTrigger의 기본적인 사용방법을 예제로 익혀보자. 가장 간단한 방법은 특정 요소가 화면에 보일 때 애니메이션을 실행하는 것이다.

 

gsap.to(".box", {
  x: 500, // 오른쪽으로 500px 이동
  duration: 2,
  scrollTrigger: {
    trigger: ".box", // 트리거 요소 지정
    start: "top 80%", // 시작 위치
    end: "top 20%", // 종료 위치
    scrub: true, // 스크롤과 애니메이션을 동기화
  }
});