Skip to main content

Animation Threshold

Use the animationThreshold option to set the minimum movement distance (px) to trigger an animation. If the movement distance is less than this value, the panel moves instantly without animation.

Try moving panels with the Prev/Next buttons and compare the event logs and animation behavior.

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

Summary​

Key Options​

OptionTypeDefaultDescription
animationThresholdnumber0.5Minimum movement distance to trigger animation (px)

Value Comparison​

ValueBehavior
0Always run animation (including 0px movement)
0.5Movements under 0.5px are processed instantly (default)
Large value (e.g., 300)All movements under the specified distance are processed instantly

Details​

How animationThreshold Works​

When Flicking moves via moveTo(), next(), prev(), etc., if the distance to the target position is less than animationThreshold, the duration is set to 0 for instant movement.

The main purpose of the default value 0.5 is to prevent the animation duration from becoming abnormally long due to floating-point calculation errors or micro-distances (less than 1px).

// Default: movements under 0.5px are instant
const flicking = new Flicking("#el", {
  animationThreshold: 0.5
});

// Always animate (including floating-point errors)
const flicking = new Flicking("#el", {
  animationThreshold: 0
});

// Movements under 300px are processed instantly
const flicking = new Flicking("#el", {
  animationThreshold: 300,
  duration: 1000
});

Use Cases​

When should you change the default?
  • Set to 0: When you need to precisely receive willChange/moveEnd events even for micro-movements
  • Set to a large value: When immediate response is needed for movements between adjacent panels (e.g., UIs with heavy programmatic control)
  • Keep the default: The default value is sufficient for typical carousels
willChange Event Firing

If animation is skipped due to animationThreshold, the willChange event may not fire. Consider this if you have event-based logic.