Events » Pan events

Pan events

By ‘panning’ is meant: moving the finger or mouse while pressing down. It’s like dragging, except that the layer isn’t necessarily following the movement.

This means that for an onPanStart (and any other panning events that can follow) to be triggered, the user has to press down… and move at least one point.

In the example project, you’ll see that this is true: nothing happens when you press down, only when you start moving the cursor.

Pan events
`onPanStart`	Panning started, the user’s finger has moved while pressing down on the layer.
`onPan` 🔃	The cursor has moved position.
`onPanLeft` 🔃	Like `onPan`, but only called when the event’s `offsetDirection` is `"left"`.
`onPanRight` 🔃	Like `onPan`, but only called when the event’s `offsetDirection` is `"right"`.
`onPanUp` 🔃	Like `onPan`, but only called when the event’s `offsetDirection` is `"up"`.
`onPanDown` 🔃	Like `onPan`, but only called when the event’s `offsetDirection` is `"down"`.
`onPanEnd`	End of the panning (triggers together with `onTapEnd`).

By the way, if you want the layer to follow the movement of the cursor you can, of course, enable dragging. Draggable layers have their own set of events.

Pan events example

In this example:

onPanStart shrinks the layer + removes the shadow
onPan changes hue or lightness, depending on the pan direction
onPanEnd scales the layer back up + adds the shadow

# Start of pan movement
square.onPanStart ->
    this.animate
        scale: 0.94
        shadowColor: null

# While panning
square.onPan ->
    # Get panning direction (up, down, left, right)
    # Change hue or saturation of backgroundColor

# Animate back on PanEnd
square.onPanEnd ->
    this.animate
        scale: 1
        shadowColor: "rgba(153,153,153,1)"

Pan events

Pan events example

Pan events example

Overview of the pan events