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
preventDefaultOnDrag: true

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