Framer Classic » 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
onPanStartPanning 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".
onPanEndEnd 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)"
Open in Framer

Pan events example

onPanStart and onPanEnd toggle the shadow
onPan changes the hue and lightness

Overview of the pan events

Overview of the pan events
Open in Framer

Leave a Reply