Gestures API

Detailed listing of all gesture related features of Svelte Motion. A lot of the wording is directly copied from framer-motion, Copyright (c) 2018 Framer B.V. MIT License.

DragDirection

"x" | "y"

DragElastic

boolean | number | Partial<BoundingBox2D >

DragHandlers

interface

• onDragStart?: (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo ) => void
  Callback function that fires when dragging starts.
• onDragEnd?: (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo ) => void
  Callback function that fires when dragging ends.
• onDrag?: (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo ) => void
  Callback function that fires when the component is dragged.
• onDirectionLock?: (axis: "x" | "y") => void
  Callback function that fires a drag direction is determined.
• onDragTransitionEnd?: () => void
  Callback function that fires when drag momentum/bounce transition finishes.

DraggableProps

interface extends DragHandlers

• drag?: boolean | "x" | "y"
  Enable dragging for this element. Set to `false` by default.
  Set `true` to drag in both directions.
  Set `"x"` or `"y"` to only drag in a specific direction.
• whileDrag?: [#VariantLabels | TargetAndTransition
  Properties or variant label to animate to while the drag gesture is recognised.
• dragDirectionLock?: boolean
  If `true`, this will lock dragging to the initially-detected direction. Defaults to `false`.
• dragPropagation?: boolean
  Allows drag gesture propagation to child components. Set to `false` by default.
• dragConstraints?: false | Partial<BoundingBox2D > | Node
  Applies constraints on the permitted draggable area.
  
  It can accept an object of optional `top`, `left`, `right`, and `bottom` values, measured in pixels.
  This will define a distance the named edge of the draggable component.
  
  Alternatively, it can accept an element node created by bind:this directive.
  This `ref` should be passed both to the draggable component's `dragConstraints` prop, and the `ref`
  of the component you want to use as constraints.
• dragElastic?: DragElastic
  The degree of movement allowed outside constraints. 0 = no movement, 1 =
  * full movement.
  *
  * Set to `0.5` by default. Can also be set as `false` to disable movement.
  *
  * By passing an object of `top`/`right`/`bottom`/`left`, individual values can be set
  * per constraint. Any missing values will be set to `0`.
• dragMomentum?: boolean
  Apply momentum from the pan gesture to the component when dragging
  * finishes. Set to `true` by default.
• dragTransition?: InertiaOptions
  Allows you to change dragging inertia parameters.
  When releasing a draggable Motion, an animation with type `inertia` starts. The animation is based on your dragging velocity. This property allows you to customize it.
  See inertia for all properties you can use.
• dragControls?: DragControls
  Usually, dragging is initiated by pressing down on a component and moving it. For some
  use-cases, for instance clicking at an arbitrary point on a video scrubber, we
  might want to initiate dragging from a different component than the draggable one.
  
  By creating a `dragControls` using the useDragControls hook, we can pass this into
  the draggable component's `dragControls` prop. It exposes a `start` method
  that can start dragging from pointer events on other components.
• dragListener?: boolean
  By default, if `drag` is defined on a component then an event listener will be attached
  to automatically initiate dragging when a user presses down on it.
  
  By setting `dragListener` to `false`, this event listener will not be created.
• onMeasureDragConstraints?: (constraints: BoundingBox2D ) => BoundingBox2D | void
  If `dragConstraints` is set to a React ref, this callback will call with the measured drag constraints.
• _dragX?, _dragY?: MotionValue <number>
  Usually, dragging uses the layout project engine, and applies transforms to the underlying VisualElement.
  Passing MotionValues as _dragX and _dragY instead applies drag updates to these motion values.
  This allows you to manually control how updates from a drag gesture on an element is applied.

EventInfo

{ point: Point2D }

FocusHandlers

interface

• whileFocus?: VariantLabels | TargetAndTransition
  Properties or variant label to animate to while the focus gesture is recognised.

HoverHandlers

interface

• whileHover?: VariantLabels | TargetAndTransition
  Properties or variant label to animate to while the hover gesture is recognised.
• onHoverStart?: (event: MouseEvent, info: EventInfo ) => void
  
• onHoverEnd?: (event: MouseEvent, info: EventInfo ) => void
  

InertiaOptions

Partial<Omit<Inertia ,'velocity' | 'type'>>
All or parts of Inertia props, except 'velocity' and 'type'

PanHandlers

interface

• onPan?: (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo ) => void
  Callback function that fires when the pan gesture is recognised on this element.
  
  **Note:** For pan gestures to work correctly with touch input, the element needs
  touch scrolling to be disabled on either x/y or both axis with the
  touch-action CSS rule.
• onPanStart?: (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo ) => void
  Callback function that fires when the pan gesture begins on this element.
• onPanSessionStart?: (event: MouseEvent | TouchEvent | PointerEvent, info: EventInfo ) => void
  Callback function that fires when we begin detecting a pan gesture. This
  is analogous to `onMouseStart` or `onTouchStart`.
• onPanEnd?: (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo ) => void
  Callback function that fires when the pan gesture ends on this element.

PanInfo

interface
Passed in to pan event handlers like `onPan` the `PanInfo` object contains
information about the current state of the tap gesture such as its
`point`, `delta`, `offset` and `velocity`.

• point: Point2D
  Contains `x` and `y` values for the current pan position relative
  to the device or page.
• delta: Point2D
  Contains `x` and `y` values for the distance moved since
  the last event.
• offset: Point2D
  Contains `x` and `y` values for the distance moved from
  the first pan event.
• velocity: Point2D
  Contains `x` and `y` values for the current velocity of the pointer, in px/ms.

TapHandlers

interface

• onTap?: (event: MouseEvent | TouchEvent | PointerEvent, info: TapInfo ) => void
  Callback when the tap gesture successfully ends on this element.
• onTapStart?: (event: MouseEvent | TouchEvent | PointerEvent, info: TapInfo ) => void
  Callback when the tap gesture starts on this element.
• onTapCancel?: (event: MouseEvent | TouchEvent | PointerEvent, info: TapInfo ) => void
  Callback when the tap gesture ends outside this element.
• whileTap?: VariantLabels | TargetAndTransition
  Properties or variant label to animate to while the component is pressed.

TapInfo

{ point: Point2D }
Contains `x` and `y` values for the tap gesture relative to the device or page.

UseDOMEvent

SvelteComponent<Props: UseDomEventProps ,Events: {}, Slots:{default:{}}>
Attaches an event listener directly to the provided DOM element.

Bypassing Sveltes's event system can be desirable, for instance when attaching non-passive event handlers.

UseDomEventProps

interface
SharedLayoutContext

• ref: {current:Node} | VisualElement<EventTarget>
  Ref object that's been provided to the element you want to bind the listener to.
• eventName: string
  Name of the event you want listen for.
• handler?: EventListener
  Function to fire when receiving the event.
• options?: AddEventListenerOptions
  Options to pass to `Event.addEventListener ` .