[GSAP] scrollTo() 함수 기본 사용법

scrollTo()

GSAP에서 ScrollToPlugin을 사용해 브라우저 스크롤을 특정 위치로 부드럽게 스크롤할 수 있습니다.

 

우선 기본적으로 gsap과 ScrollToPlugin을 프로젝트에 불러와야합니다.

cdn을 통해 불러오겠습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollToPlugin.min.js"></script>

 

창을 위에서 500px 위치로 스크롤 이동하려면

우선 'gsap.to()' 함수를 호출하고 'scrollTo' 속성에 숫자 500을 넣어서 간단하게 이동시킬 수 있습니다.

gsap.to(window, {duration: 1, scrollTo: 500});

 

특정 요소로 스크롤할 수도 있습니다. 예를 들어, '#section2'라는 요소로 스크롤하려면 아래처럼 적어주면 됩니다.

gsap.to(window, {duration: 1, scrollTo: "#section2"});

 

 

위 예제들은 'window' 즉 기본 브라우저 창 스크롤을 컨트롤 하는것이라면,

창 대신 특정 스크롤 가능한 컨테이너에도 타켓으로 설정할 수 있습니다.

gsap.to("#scrollContainer", {duration: 1, scrollTo: {y: 200}});

 

간단하게 스크롤 애니메이션의 지속시간과 이징 옵션을 조정할 수도 있습니다.

gsap.to(window, {
  duration: 1.5,	// 스크롤 속도 수정
  scrollTo: {
    y: "#section2", // #section2 요소로 스크롤 이동
    offsetY: 50 // 요소 위 50픽셀 위치로 스크롤
  },
  ease: "power2.inOut"	// 이징 수정
});

 

---

 

하지만 위 예제들은 페이지가 로딩되면 바로 스크롤이 이동해버립니다.

 

GSAP에서 제공하는 클릭 시 스크롤이동 예제입니다.

 

document.querySelectorAll("nav button").forEach((btn, index) => {	// forEach로 버튼과 버튼 index값을 가져옴
  btn.addEventListener("click", () => {
    gsap.to(window, {
        duration: 1, 
        scrollTo:{
            y:"#section" + (index + 1), // (index + 1) = 각 section 뒤에 숫자를 뜻함. index는 0부터 시작하기 때문에 +1을 합니다.
            offsetY: 70	// section 이동버튼이 상단 fixed로 고정되어 있기때문에 그 값 70px을 offsetY 값으로 설정
        }
    });
  });
});

 

 

GSAP의 ScrollToPlugin을 사용하면 최소한의 코드로 부드러운 스크롤 효과를 구현 할 수 있습니다.

다음번엔 scrollTo() 함수의 다른 옵션들을 다뤄보겠습니다.

 

자세한 내용은 GSAP ScrollToPlugin 문서를 참고하세요.