Duration

duration 옵션으로 패널 스냅 애니메이션의 지속 시간을 밀리초 단위로 설정합니다.

JavaScript

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

// duration: 100 (fast)
new Flicking("#flick-fast", {
  duration: 100,
  align: "center"
});

// duration: 500 (default)
new Flicking("#flick-default", {
  duration: 500,
  align: "center"
});

// duration: 1500 (slow)
new Flicking("#flick-slow", {
  duration: 1500,
  align: "center"
});

Open Sandbox

React

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

export default function App() {
  return (
    <div>
      {/* duration: 100 (fast) */}
      <div className="demo-container">
        <div className="demo-label">duration: 100 (fast animation)</div>
        <Flicking duration={100} align="center">
          <div className="flicking-panel panel-1">1</div>
          <div className="flicking-panel panel-2">2</div>
          <div className="flicking-panel panel-3">3</div>
          <div className="flicking-panel panel-4">4</div>
          <div className="flicking-panel panel-5">5</div>
        </Flicking>
      </div>

      {/* duration: 500 (default) */}
      <div className="demo-container">
        <div className="demo-label">duration: 500 (default)</div>
        <Flicking duration={500} align="center">
          <div className="flicking-panel panel-1">1</div>
          <div className="flicking-panel panel-2">2</div>
          <div className="flicking-panel panel-3">3</div>
          <div className="flicking-panel panel-4">4</div>
          <div className="flicking-panel panel-5">5</div>
        </Flicking>
      </div>

      {/* duration: 1500 (slow) */}
      <div className="demo-container">
        <div className="demo-label">duration: 1500 (slow animation)</div>
        <Flicking duration={1500} align="center">
          <div className="flicking-panel panel-1">1</div>
          <div className="flicking-panel panel-2">2</div>
          <div className="flicking-panel panel-3">3</div>
          <div className="flicking-panel panel-4">4</div>
          <div className="flicking-panel panel-5">5</div>
        </Flicking>
      </div>
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <!-- duration: 100 (fast) -->
    <div class="demo-container">
      <div class="demo-label">duration: 100 (fast animation)</div>
      <Flicking :options="{ duration: 100, align: 'center' }">
        <div class="flicking-panel panel-1">1</div>
        <div class="flicking-panel panel-2">2</div>
        <div class="flicking-panel panel-3">3</div>
        <div class="flicking-panel panel-4">4</div>
        <div class="flicking-panel panel-5">5</div>
      </Flicking>
    </div>

    <!-- duration: 500 (default) -->
    <div class="demo-container">
      <div class="demo-label">duration: 500 (default)</div>
      <Flicking :options="{ duration: 500, align: 'center' }">
        <div class="flicking-panel panel-1">1</div>
        <div class="flicking-panel panel-2">2</div>
        <div class="flicking-panel panel-3">3</div>
        <div class="flicking-panel panel-4">4</div>
        <div class="flicking-panel panel-5">5</div>
      </Flicking>
    </div>

    <!-- duration: 1500 (slow) -->
    <div class="demo-container">
      <div class="demo-label">duration: 1500 (slow animation)</div>
      <Flicking :options="{ duration: 1500, align: 'center' }">
        <div class="flicking-panel panel-1">1</div>
        <div class="flicking-panel panel-2">2</div>
        <div class="flicking-panel panel-3">3</div>
        <div class="flicking-panel panel-4">4</div>
        <div class="flicking-panel panel-5">5</div>
      </Flicking>
    </div>
  </div>
</template>

<script setup>
import Flicking from "@egjs/vue3-flicking";
import "@egjs/vue3-flicking/dist/flicking.css";
</script>


<style>

.flicking-viewport.vertical {
  display: block;
  width: 100%;
}

.flicking-panel {
  width: 200px;
  height: 150px;
  margin-right: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.panel-1 { background: #3e8ed0; }
.panel-2 { background: #00d1b2; }
.panel-3 { background: #f14668; }
.panel-4 { background: #ffe08a; color: #333; }
.panel-5 { background: #48c78e; }

.demo-container {
  margin-bottom: 24px;
}

.demo-label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #666;
}

.button {
  padding: 8px 16px;
  margin: 4px;
  border: 2px solid #3498db;
  background: transparent;
  color: #3498db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.button:hover {
  background: #3498db;
  color: white;
}

.controls {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  gap: 8px;
}

.flicking-panel {
  width: 50%;
  height: 120px;
}

</style>

Open Sandbox

요약

주요 옵션

옵션	타입	기본값	설명
duration	number	500	애니메이션 지속 시간 (ms)

값별 비교

값	동작	적합한 상황
100 이하	거의 즉시 스냅	빠른 반응이 필요한 UI, 게임
300~500	자연스러운 속도	일반 캐러셀, 이미지 갤러리
1000 이상	느린 전환	프레젠테이션, 강조 효과

상세 설명

duration 동작 원리

드래그를 마치고 손을 떼면 패널이 목표 위치로 스냅됩니다. duration은 이 스냅 애니메이션이 완료되기까지 걸리는 시간입니다.

// 다양한 duration 값
duration: 100   // 빠른 스냅 (0.1초)
duration: 500   // 기본값 (0.5초)
duration: 1500  // 느린 스냅 (1.5초)
duration: 0     // 애니메이션 없이 즉시 이동

연관 옵션

• easing과의 관계: duration은 애니메이션 시간을, easing은 애니메이션 곡선을 결정합니다. 둘을 조합하여 다양한 전환 효과를 만들 수 있습니다.
• moveType과의 관계: moveType: "freeScroll"에서는 관성 스크롤이 적용되어 duration과 다르게 동작할 수 있습니다.

사용 시나리오

언제 사용하나요?

• 짧은 duration (100~300ms): 빠른 반응이 중요한 UI, 탭 전환, 게임 인터페이스
• 기본 duration (400~600ms): 일반적인 캐러셀, 이미지 갤러리
• 긴 duration (800ms 이상): 프레젠테이션, 온보딩, 전환 효과 강조

주의사항

duration: 0 사용 시

duration: 0으로 설정하면 애니메이션 없이 즉시 이동합니다. 시각적 피드백이 없어 사용자가 혼란스러울 수 있으니 주의하세요.

너무 긴 duration

1초 이상의 duration은 사용자가 기다리는 느낌을 줄 수 있습니다. 특별한 의도가 아니라면 500ms 전후를 권장합니다.

관련 링크

관련 옵션

• easing: 애니메이션 곡선
• moveType: 이동 동작 모드

관련 데모

• Easing: 애니메이션 곡선 조절
• Movement Types: 이동 동작 모드