-
[GSAP] scrollTo() 함수 기본 사용법Coding 2024. 6. 2. 23:06반응형
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 문서를 참고하세요.
반응형'Coding' 카테고리의 다른 글
[GSAP] ScrollTrigger 시작 시점 리턴 값 얻는 방법 (0) 2024.03.05 [SCSS] 내 기준 유용하게 사용하고있는 scss mixin 모음 (0) 2023.07.14 [CSS] aspect-ratio 속성으로 object 비율 맞추기 (+크로스 브라우징) (0) 2023.07.13 [CSS] 이미지를 컨테이너에 맞게 사이즈 통일하는 방법 (object-fit, background ..) (0) 2023.07.12 [CSS, JS] 꽃이 흔들거리는 효과 구현하기 (0) 2023.05.19