Horizontal scroll section with GSAP ScrollTrigger & Locomotive Scroll

GSAP ScrollTrigger와 Locomotive Scroll로 구현하는 가로 스크롤 섹션

스크롤과 함께 자연스럽게 좌우로 움직이는 가로 스크롤 인터랙션을 구현하고 싶으신가요?
이 글에서는 GSAP의 ScrollTrigger와 Locomotive Scroll을 조합하여 세로 스크롤을 가로 이동 효과로 바꾸는 방법을 자세히 설명합니다.

 

See the Pen Horizontal scroll section with GSAP ScrollTrigger & Locomotive Scroll by Cameron Knight (@cameronknight) on CodePen.

---

1. 전체 구조 개요

전체 콘텐츠는 세로 스크롤이지만, 특정 섹션에서만 가로 방향으로 콘텐츠가 이동하는 구조입니다.
이를 위해 아래 세 가지 요소가 필요합니다.

• Locomotive Scroll: 부드러운 스크롤 구현
• GSAP ScrollTrigger: 스크롤 트리거 기반의 애니메이션
• ScrollTrigger + Locomotive Scroll 연동: 서로 다른 스크롤 시스템 동기화

---

2. HTML 구조

<div class="scroll-container" data-scroll-container>
  <section class="panel">Section 1</section>
  <section class="panel">Section 2</section>
  <section class="panel">Section 3</section>
  <section class="panel">Section 4</section>
</div>

3. CSS 기본 스타일

body {
  margin: 0;
  overflow: hidden;
}

.scroll-container {
  display: flex;
  height: 100vh;
}

.panel {
  flex: 0 0 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

---

4. 스크립트 설정: 순서대로 설명

1) Locomotive Scroll 초기화

Locomotive Scroll은 부드러운 스크롤과 패럴랙스 효과를 제공해주는 라이브러리입니다. 먼저 DOM 요소를 기준으로 초기화합니다.

const locoScroll = new LocomotiveScroll({
  el: document.querySelector(".scroll-container"), // 대상 컨테이너
  smooth: true                                      // 부드러운 스크롤 활성화
});

2) GSAP ScrollTrigger에 Locomotive Scroll 연결

Locomotive Scroll은 기본 스크롤을 직접 제어하므로, GSAP이 이를 인식할 수 있도록 scrollerProxy를 설정해야 합니다.

ScrollTrigger.scrollerProxy(".scroll-container", {
  scrollTop(value) {
    return arguments.length
      ? locoScroll.scrollTo(value, 0, 0) // 스크롤 위치 설정
      : locoScroll.scroll.instance.scroll.y; // 현재 위치 반환
  },
  getBoundingClientRect() {
    return {
      top: 0,
      left: 0,
      width: window.innerWidth,
      height: window.innerHeight
    };
  },
  pinType: document.querySelector(".scroll-container").style.transform
    ? "transform"
    : "fixed"
});

3) ScrollTrigger와 LocomotiveScroll 동기화

GSAP의 내부 상태를 업데이트하도록 설정합니다.

ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
ScrollTrigger.refresh();

4) 가로 스크롤 애니메이션 정의

이제 실제 애니메이션을 설정합니다. ScrollTrigger를 사용해 특정 구간에서 .scroll-container를 x축 방향으로 이동시켜 가로 스크롤처럼 보이게 만듭니다.

gsap.to(".scroll-container", {
  xPercent: -300, // 전체 패널 개수에 따라 조정 (4개면 -300%)
  ease: "none",
  scrollTrigger: {
    trigger: ".scroll-container",
    start: "top top",
    end: "+=3000", // 길이는 콘텐츠 폭에 따라 조정
    scrub: true,
    pin: true,
    anticipatePin: 1,
    scroller: ".scroll-container" // Locomotive Scroll 사용시 필수
  }
});

---

5. 마무리 요약

• Locomotive Scroll로 부드러운 스크롤을 구현한 뒤
• GSAP ScrollTrigger와 scrollerProxy를 이용해 두 스크롤 시스템을 연동
• 가로 스크롤 효과는 xPercent로 구현하며, 스크롤 진행도와 함께 동기화