[javascript] GSAP를 활용한 플리킹(Flicking) 및 스와이프(Swipe) 애니메이션

27 Nov 2023

javascript

이번 글에서는 GSAP(GreenSock Animation Platform)을 사용하여 웹 애플리케이션에서 플리킹(Flicking) 및 스와이프(Swipe) 애니메이션을 구현하는 방법에 대해 알아보겠습니다. GSAP는 웹 애니메이션을 쉽게 구현할 수 있는 라이브러리로서, 강력한 기능과 훌륭한 성능을 제공합니다.

1. GSAP 설치

GSAP를 사용하기 위해선 먼저 GSAP를 설치해야 합니다. npm을 사용하는 경우 다음 명령어를 실행하세요.

npm install gsap

또는 CDN을 통해 GSAP를 직접 포함시킬 수도 있습니다. 해당 방법의 자세한 내용은 GSAP 공식 문서를 참고하시기 바랍니다.

2. Flicking 애니메이션 구현하기

2.1 HTML 구조 설정

먼저 Flicking 애니메이션을 구현하기 위해 필요한 HTML 구조를 설정합니다.

<div class="flicking-container">
  <div class="flicking-wrapper">
    <div class="flicking-panel">Panel 1</div>
    <div class="flicking-panel">Panel 2</div>
    <div class="flicking-panel">Panel 3</div>
    <!-- 추가적인 패널들... -->
  </div>
</div>

2.2 CSS 스타일링

Flicking 컨테이너와 패널들에 대한 CSS 스타일을 추가합니다.

.flicking-container {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.flicking-wrapper {
  display: flex;
  width: 300%;
  height: 100%;
}

.flicking-panel {
  flex: 1 0 100%;
  height: 100%;
  background-color: #f1f1f1;
}

2.3 JavaScript로 애니메이션 구현

이제 GSAP를 사용하여 Flicking 애니메이션을 구현합니다.

import { gsap } from "gsap";

const container = document.querySelector(".flicking-container");
const wrapper = document.querySelector(".flicking-wrapper");
const panels = document.querySelectorAll(".flicking-panel");

// 각각의 패널을 가로로 배치
gsap.set(panels, { xPercent: -100 });

const flicking = gsap.timeline({ repeat: -1 });
panels.forEach((panel, index) => {
  flicking.fromTo(
    panel,
    { xPercent: -100 },
    {
      xPercent: 0,
      duration: 1,
      ease: "power2.out",
      delay: index * 2, // 패널 간 딜레이
    }
  );
});

// 컨테이너 크기에 따라 wrapper 너비 조정
gsap.set(wrapper, { width: `${panels.length * 100}%` });

위의 코드는 GSAP의 gsap.timeline()을 사용하여 패널들을 순차적으로 이동시키는 Flicking 애니메이션을 구현한 예시입니다. 각 패널은 -100% 위치에서 시작하여 0% 위치로 이동하게 됩니다.

3. Swipe 애니메이션 구현하기

3.1 HTML 구조 설정

Swipe 애니메이션을 구현하기 위해 필요한 HTML 구조를 설정합니다.

<div class="swipe-container">
  <div class="swipe-wrapper">
    <div class="swipe-panel">Panel 1</div>
    <div class="swipe-panel">Panel 2</div>
    <div class="swipe-panel">Panel 3</div>
    <!-- 추가적인 패널들... -->
  </div>
</div>

3.2 CSS 스타일링

Swipe 컨테이너와 패널들에 대한 CSS 스타일을 추가합니다.

.swipe-container {
  width: 100%;
  height: 400px;
  overflow: hidden;
  touch-action: pan-y; /* 수직 스와이프만 허용 */
  -webkit-overflow-scrolling: touch; /* iOS 스크롤 성능 최적화 */
}

.swipe-wrapper {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.3s;
}

.swipe-panel {
  flex: 1 0 100%;
  height: 100%;
  background-color: #f1f1f1;
}

3.3 JavaScript로 애니메이션 구현

GSAP와 함께 Swipe 애니메이션을 구현해보겠습니다.

import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";

gsap.registerPlugin(Draggable);

const container = document.querySelector(".swipe-container");
const wrapper = document.querySelector(".swipe-wrapper");

Draggable.create(wrapper, {
  type: "x",
  edgeResistance: 0.5,
  bounds: container,
  onDrag: updateSwipePosition,
});

function updateSwipePosition() {
  gsap.set(wrapper, { x: this.x });
}

위의 코드는 GSAP의 Draggable.create()를 사용하여 패널들을 가로로 스와이프할 수 있는 Swipe 애니메이션을 구현한 예시입니다. 패널들은 컨테이너의 경계 내에서만 드래그될 수 있습니다. 드래그 중인 위치에 따라 wrapper의 x 위치가 업데이트되며, updateSwipePosition() 함수가 호출됩니다.

이제 GSAP를 사용하여 웹 애플리케이션에서 플리킹(Flicking) 및 스와이프(Swipe) 애니메이션을 구현하는 방법에 대해 알아보았습니다. GSAP는 웹 애니메이션 작업을 훨씬 쉽게 만들어 줄 수 있는 강력한 도구입니다. GSAP 공식 문서를 참고하여 더 많은 기능과 옵션을 살펴보시기 바랍니다.