본문으로 건너뛰기

Animation Threshold

animationThreshold 옵션으로 애니메이션을 실행할 최소 이동 거리(px)를 설정합니다. 이동 거리가 이 값보다 작으면 애니메이션 없이 즉시 이동합니다.

Prev/Next 버튼으로 패널을 이동하면서 이벤트 로그와 애니메이션 동작을 비교해보세요.

import Flicking from "@egjs/flicking";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

// animationThreshold: 0.5 (default)
const flick1 = new Flicking("#flick-default", {
  duration: 1000,
  animationThreshold: 0.5,
  align: "center"
});

flick1.on("willChange", () => {
  document.getElementById("log1").textContent = "▶ Animation started";
});
flick1.on("moveEnd", () => {
  document.getElementById("log1").textContent = "✓ Move complete";
});

document.getElementById("prev1").addEventListener("click", () => flick1.prev().catch(() => {}));
document.getElementById("next1").addEventListener("click", () => flick1.next().catch(() => {}));

// animationThreshold: 300
const flick2 = new Flicking("#flick-threshold", {
  duration: 1000,
  animationThreshold: 300,
  align: "center"
});

flick2.on("willChange", () => {
  document.getElementById("log2").textContent = "▶ Animation started";
});
flick2.on("moveEnd", () => {
  document.getElementById("log2").textContent = "✓ Move complete";
});

document.getElementById("prev2").addEventListener("click", () => flick2.prev().catch(() => {}));
document.getElementById("next2").addEventListener("click", () => flick2.next().catch(() => {}));
Open on CodeSandboxOpen Sandbox

요약​

주요 옵션​

옵션타입기본값설명
animationThresholdnumber0.5애니메이션 실행 최소 이동 거리 (px)

값별 비교​

값동작
0항상 애니메이션 실행 (0px 이동도 포함)
0.50.5px 미만 이동은 즉시 처리 (기본값)
큰 값 (예: 300)지정 거리 미만 이동은 모두 즉시 처리

상세 설명​

animationThreshold 동작 원리​

Flicking이 moveTo(), next(), prev() 등으로 이동할 때, 목표 위치까지의 거리가 animationThreshold보다 작으면 duration을 0으로 설정해 즉시 이동합니다.

기본값 0.5의 주목적은 소수점 계산 오차나 미세 거리(1px 미만)에서 animation duration이 비정상적으로 늘어나는 현상을 방지하는 것입니다.

// 기본값: 0.5px 미만은 즉시 이동
const flicking = new Flicking("#el", {
  animationThreshold: 0.5
});

// 항상 애니메이션 (소수점 오차도 포함)
const flicking = new Flicking("#el", {
  animationThreshold: 0
});

// 300px 미만 이동은 즉시 처리
const flicking = new Flicking("#el", {
  animationThreshold: 300,
  duration: 1000
});

사용 시나리오​

언제 기본값을 변경하나요?
  • 0으로 설정: 미세 이동에서도 정확하게 willChange/moveEnd 이벤트를 수신해야 할 때
  • 큰 값으로 설정: 근접한 패널 간 이동 시 즉각적인 응답이 필요할 때 (예: 프로그래매틱 제어가 많은 UI)
  • 기본값 유지: 일반적인 캐러셀에서는 기본값으로 충분합니다
willChange 이벤트 발생 여부

animationThreshold로 인해 애니메이션이 건너뛰어지면 willChange 이벤트가 발생하지 않을 수 있습니다. 이벤트 기반 로직이 있다면 이 점을 고려하세요.

관련 링크​

관련 옵션​

  • duration: 애니메이션 지속 시간
  • easing: 애니메이션 가속도 곡선

관련 데모​