웹사이트에 스크롤 애니메이션 추가하는 가장 쉬운 방법

 

 

GSAP는 강력한 웹 애니메이션 라이브러리로, ScrollTrigger는 gsap의 플러그인중 하나이다.

ScrollTrigger를 사용하면 사용자의 스크롤 위치에 따라 애니메이션을 실행하거나 컨트롤할 수 있다.

특히, 웹사이트에서 스크롤을 기반으로 동적인 인터랙션을 만들 때 유용하다.

 

---

 

ScrollTrigger의 주요 기능

• 스크롤 위치를 감지하여 애니메이션 실행 : 특정 요소가 화면에 나타날 때 애니메이션을 시작할 수 있다.
• 스크롤 진행률에 따라 애니메이션 속도 조절(scrub 기능) : 사용자의 스크롤 속도에 따라 애니메이션을 부드럽게 조절할 수 있다.
• 요소가 뷰포트에 들어올 때 트리거 : 특정 위치에서 애니메이션을 실행하도록 설정할 수 있다.
• 고정(fixed) 애니메이션 지원(pin 기능) : 특정 요소를 스크롤 중에 고정시켜 화면에 유지할 수 있다.
• 다양한 이벤트(onEnter, onLeve, onUpdate 등) 제공 : 요소가 보이거나 사라질 때 다양한 이벤트를 활용할 수 있다.

---

 

예제 코드

// ScrollTrigger 기본 등록
gsap.registerPlugin(ScrollTrigger);

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