Skip to main content

Options

Axis Options​

range​

The range of coordinate.

x: {
  range: [0, width],
},
y: {
  range: [0, height],
},
x: 0 y: 0
x: {
  range: [0, width / 2],
},
y: {
  range: [0, height / 2],
},
x: 0 y: 0

bounce​

The size of bouncing area. The coordinates can exceed the coordinate area as much as the bouncing area based on user action. If the coordinates does not exceed the bouncing area when an element is dragged, the coordinates where bouncing effects are applied are retuned back into the coordinate area.

x: {
  bounce: 10,
},
y: {
  bounce: 10,
},
x: 0 y: 0
x: {
  bounce: 20,
},
y: {
  bounce: 20,
},
x: 0 y: 0

circular​

Indicates whether a circular element is available. If it is set to "true" and an element is dragged outside the coordinate area, the element will appear on the other side.

x: {
  circular: false,
},
y: {
  circular: false,
},
x: 0 y: 0
x: {
  circular: true,
},
y: {
  circular: true,
},
x: 0 y: 0

startPos​

The coordinates to be moved when creating an instance.

x: {
  startPos: 0,
},
y: {
  startPos: 60,
},
x: 0.1 y: 60
x: {
  startPos: 100,
},
y: {
  startPos: 60,
},
x: 100 y: 60

Axes Options​

easing​

The easing function to apply to an animation.

easing: x => 1 - Math.pow(1 - x, 3)
x: 0 y: 0
easing: x => x
x: 0 y: 0

maximumDuration​

Maximum duration of the animation. (milisecond)

maximumDuration: 5000
x: 0 y: 0
maximumDuration: 500
x: 0 y: 0

minimumDuration​

Minimum duration of the animation. (milisecond)

minimumDuration: 0
x: 0 y: 0
minimumDuration: 2000
x: 0 y: 0

deceleration​

Deceleration of the animation where acceleration is manually enabled by user. A higher value indicates shorter running time.

deceleration: 0.0006
x: 0 y: 0
deceleration: 0.0015
x: 0 y: 0

interruptable​

Indicates whether an animation is interruptible.

  • true: It can be paused or stopped by user action or the API.
  • false: It cannot be paused or stopped by user action or the API while it is running.
interruptable: true
x: 0 y: 0
interruptable: false
x: 0 y: 0

round​

Rounding unit. For example, 0.1 rounds to 0.1 decimal point(6.1234 => 6.1), 5 rounds to 5 (93 => 95)

round: 1
x: 0 y: 0
round: 20
x: 0 y: 0

nested​

Whether the event propagates to other instances when the coordinates reach the end of the movable area.

nested: false
x: 0 y: 0
nested: true
x: 0 y: 0

PanInput Options​

scale​

Coordinate scale that a user can move.

scale: [1, 1]
x: 0 y: 0
scale: [3, 3]
x: 0 y: 0

inputType​

Types of input devices.

  • touch: Touch screen
  • mouse: Mouse
  • pointer: Mouse and touch
inputType: ["mouse"]
x: 0 y: 0
inputType: ["touch"]
x: 0 y: 0

inputKey​

List of key combinations to allow input

  • any: any key
  • shift: shift key
  • ctrl: ctrl key and pinch gesture on the trackpad
  • alt: alt key
  • meta: meta key
  • none: none of these keys are pressed
inputKey: ["any"]
x: 0 y: 0
inputKey: ["ctrl"]
x: 0 y: 0

inputButton​

List of buttons to allow input.

  • left: Left mouse button and normal touch
  • middle: Mouse wheel press
  • right: Right mouse button
inputButton: ["left", "right"]
x: 0 y: 0
inputButton: ["right"]
x: 0 y: 0

thresholdAngle​

The threshold value that determines whether user action is horizontal or vertical (0~90).

info

Hint: These examples only have a x-axis. Try using the input direction similar to y-axis.

thresholdAngle: 15
x: 0 y: 0
thresholdAngle: 75
x: 0 y: 0

threshold​

Minimal pan distance required before recognizing.

threshold: 0
x: 0 y: 0
threshold: 30
x: 0 y: 0

preventClickOnDrag​

Whether to cancel the click event when the user finishes dragging more than 1 pixel.

preventClickOnDrag: false
x: 0 y: 0
preventClickOnDrag: true
x: 0 y: 0

preventDefaultOnDrag​

Whether to use the preventDefault when the user starts dragging.

info

Hint: These examples only have a x-axis. Try using the input direction similar to y-axis.

preventDefaultOnDrag: false
x: 0 y: 0
Clickable Link
preventDefaultOnDrag: true
x: 0 y: 0
Clickable Link

iOSEdgeSwipeThreshold​

Area (px) that can go to the next page when swiping the right edge in iOS safari.

iOSEdgeSwipeThreshold: 30
x: 0 y: 0
iOSEdgeSwipeThreshold: 120
x: 0 y: 0

releaseOnScroll​

Whether to release input when a native event with cancelable: false occurs while user input.

releaseOnScroll: false
x: 0 y: 0
releaseOnScroll: true
x: 0 y: 0

touchAction​

Value that overrides the element's "touch-action" css property. If set to null, it is automatically set to prevent scrolling in the direction of the connected axis.

info

Hint: These examples only have a x-axis. Try using the input direction similar to y-axis in mobile device.

touchAction: "none"
x: 0 y: 0
touchAction: "pan-y"
x: 0 y: 0

WheelInput Options​

inputKey​

List of key combinations to allow input

  • any: any key
  • shift: shift key
  • ctrl: ctrl key and pinch gesture on the trackpad
  • alt: alt key
  • meta: meta key
  • none: none of these keys are pressed
inputKey: ["any"]
x: 0 y: 0
inputKey: ["ctrl"]
x: 0 y: 0

scale​

Coordinate scale that a user can move.

scale: 5
x: 0 y: 0
scale: 20
x: 0 y: 0

releaseDelay​

Millisecond that trigger release event after last input.

releaseDelay: 300
x: 0 y: 0
releaseDelay: 2000
x: 0 y: 0

useAnimation​

Whether to process coordinate changes through the mouse wheel as a continuous animation.

useAnimation: false
x: 0 y: 0
useAnimation: true
x: 0 y: 0

MoveKeyInput Options​

scale​

Coordinate scale that a user can move.

scale: [5, -5]
x: 0 y: 0
scale: [20, -20]
x: 0 y: 0

PinchInput Options​

info

Hint: You can compare the action of PinchInput on mobile device.

scale​

Coordinate scale that a user can move.

scale: 4
x: 0 y: 0
scale: 10
x: 0 y: 0

threshold​

Minimal scale before recognizing.

threshold: 0
x: 0 y: 0
threshold: 5
x: 0 y: 0

inputType​

Types of input devices

  • touch: Touch screen
  • pointer: Mouse and touch
inputType: ["touch"]
x: 0 y: 0
inputType: ["touch", "pointer"]
x: 0 y: 0

touchAction​

Value that overrides the element's "touch-action" css property. It is set to "none" to prevent scrolling during touch.

touchAction: "none"
x: 0 y: 0
touchAction: "pan-y"
x: 0 y: 0