Interruptable

The interruptable option controls whether user drag input is allowed while a panel animation is in progress.

Press the button to start a 2-second animation, then try dragging during it to see the difference.

JavaScript

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

// interruptable: true (default)
const flick1 = new Flicking("#flick-interruptable", {
  duration: 2000,
  align: "center",
  interruptable: true
});

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

// interruptable: false
const flick2 = new Flicking("#flick-not-interruptable", {
  duration: 2000,
  align: "center",
  interruptable: false
});

document.getElementById("btn2").addEventListener("click", () => {
  flick2.next().catch(() => {});
});

Open Sandbox

React

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

export default function App() {
  const ref1 = useRef(null);
  const ref2 = useRef(null);

  return (
    <div>
      {/* interruptable: true (default) */}
      <div className="demo-container">
        <div className="demo-label">interruptable: true (default — drag during animation)</div>
        <Flicking ref={ref1} duration={2000} align="center" interruptable={true}>
          <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 className="controls">
          <button onClick={() => ref1.current?.next().catch(() => {})}>Next (start 2s animation)</button>
        </div>
        <div className="demo-hint">Drag during animation to interrupt it immediately</div>
      </div>

      {/* interruptable: false */}
      <div className="demo-container">
        <div className="demo-label">interruptable: false (ignores drag until animation ends)</div>
        <Flicking ref={ref2} duration={2000} align="center" interruptable={false}>
          <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 className="controls">
          <button onClick={() => ref2.current?.next().catch(() => {})}>Next (start 2s animation)</button>
        </div>
        <div className="demo-hint">Drag is ignored until the animation completes</div>
      </div>
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <!-- interruptable: true (default) -->
    <div class="demo-container">
      <div class="demo-label">interruptable: true (default — drag during animation)</div>
      <Flicking ref="flick1" :options="{ duration: 2000, align: 'center', interruptable: true }">
        <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 class="controls">
        <button @click="next1">Next (start 2s animation)</button>
      </div>
      <div class="demo-hint">Drag during animation to interrupt it immediately</div>
    </div>

    <!-- interruptable: false -->
    <div class="demo-container">
      <div class="demo-label">interruptable: false (ignores drag until animation ends)</div>
      <Flicking ref="flick2" :options="{ duration: 2000, align: 'center', interruptable: false }">
        <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 class="controls">
        <button @click="next2">Next (start 2s animation)</button>
      </div>
      <div class="demo-hint">Drag is ignored until the animation completes</div>
    </div>
  </div>
</template>

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

const flick1 = ref(null);
const flick2 = ref(null);

const next1 = () => {
  flick1.value.next().catch(() => {});
};
const next2 = () => {
  flick2.value.next().catch(() => {});
};
</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;
}

.controls {
  margin-top: 8px;
}
.controls button {
  margin-right: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
.demo-hint {
  margin-top: 6px;
  font-size: 13px;
  color: #888;
}

</style>

Open Sandbox

Summary

Key Options

Option	Type	Default	Description
interruptable	boolean	true	Allow user input during animation
changeOnHold	boolean	false	Whether to immediately update the panel index during drag

Comparison by Value

Value	Behavior	Suitable For
true	Responds immediately to drag during animation (default)	General carousels, fast browsing
false	Ignores drag until animation completes	Presentations, ensuring complete animation playback

Details

How Interruptable Works

When interruptable: true (default), Flicking accepts user input during animation and immediately transitions to a new drag. If a user drags while a panel is being moved by a button, the new drag starts from the current position at that moment.

When interruptable: false, it waits until the animation is fully complete before accepting the next input. Useful for slideshows or presentations where each transition effect needs to be shown completely.

// Default: drag is possible during animation
const flicking = new Flicking("#el", {
  interruptable: true
});

// Allow input only after animation completes
const flicking = new Flicking("#el", {
  interruptable: false,
  duration: 1000
});

changeOnHold

The changeOnHold option determines whether to immediately update the current panel index when a user pauses during a drag and "holds" a panel. With the default false, the index changes when the snap completes after release.

Use Cases

When to use?

• interruptable: true (default): General image galleries, product lists, and other carousels where users freely browse
• interruptable: false: Presentation slides, onboarding screens where each slide transition animation must be shown completely

Caution

When interruptable: false with a long duration, users may feel frustrated waiting for input. Use only when necessary.

Related Links

Related Options

• duration: Animation duration
• changeOnHold: Immediately update panel index during drag

Related Demos

• Duration: Setting animation duration
• Easing: Animation acceleration curve