Framer Classic » Events » Multi-touch events

Multi-touch events

These events let you listen for the two-finger pinch and rotation actions on a pinchable layer. But the layer doesn’t actually have to be pinchable, the events will work on any layer.

Pinch, Scale and Rotate

Pinch events
onPinchStartTwo fingers started panning or moving on the layer (or one finger was already on the layer and a second finger was added to the screen)
onPinch 🔃The fingers moved (can be outside of the layer at this point)
onPinchEndAt least one of the fingers stopped touching the screen
Scale events
onScaleStartSee onPinchStart
onScale 🔃See onPinch
onScaleEndSee onPinchEnd
Rotate events
onRotateStartSee onPinchStart
onRotate 🔃See onPinch
onRotateEndSee onPinchEnd

The three types of events, pinch, scale and rotate, are interchangeable. When making a two-finger gesture, all three will be triggered simultaneously. The separate events were created just for your convenience.

Two fingers only

  • Only gestures with two fingers will trigger these events. Gestures that starts with three or more fingers are ignored (the third digit doesn’t even need to be on the layer in question).
  • But fingers can be added once the gesture has already started, this will not break the stream of onPinch (nor onScale and onRotate) events.
  • When there’s only one finger remaining on the screen, onPinchEnd (and onScaleEnd and onRotateEnd) will be called.

Multi-touch example

These events are used in the example:

  • onPinchStart shows the scale and rotation labels
  • onScale updates the current scale factor in the label
  • onRotate updates the degrees of rotation in the label
  • onPinchEnd snaps the layer back to its original position and size, resets the scale and rotation labels, and fades them out
layerA.onPinchStart ->
    labelScale.opacity = 1
    labelRotate.opacity = 1
layerA.onScale ->
    labelScale.html = "Scale: #"
layerA.onRotate ->
    labelRotate.html = "Rotation: # º"
# Snap back to original state
layerA.onPinchEnd ->
    layerA.animate 
        rotation: 0
        scale: .5

    Utils.delay .5, ->
        labelScale.html = "Scale: -.-"
        labelRotate.html = "Rotation: -.- º"

        Utils.delay 1, ->
            labelScale.opacity = 0
            labelRotate.opacity = 0
Download Framer project
Multi-touch example
onPinchStart shows the labels, onPinchEnd hides them (with a delay).
onScale and onRotate change the label values

Note: Because onScale and onRotate are interchangeable, we might as well have used only one of them to update both labels.

Overview of the multi-touch events

The different multi-touch events
Download Framer project

Leave a Reply