Framer Classic » Events » Tap events

Tap events

In this section:

Tap and Double tap

Note that onTap triggers at the end of a tap. But there’s onTapStart for when you need to track the beginning of a tap gesture.

Tap and Double tap events
onTapStartStart of a touch or click. (the press down)
onTapA tap or click on the layer. (Triggers upon release, together with onTapEnd.)
onTapEndEnd of a touch or click. (The release, triggers together with onTap.)
onDoubleTapIs triggered after two consecutive taps with less than ¼ second between them.

An onDoubleTap is triggered when there are two separate taps on the layer within 0.25 seconds.

Tap example

These events are used in the example below:

  • onTapStart shrinks the layer and removes the shadow
  • onTap changes the color
  • onTapEnd scales the layer back up and adds the shadow
layerA.onTapStart ->
    this.scale = 0.94
    this.shadowColor = null

layerA.onTap ->
    this.backgroundColor = colorcycler()

layerA.onTapEnd ->
    this.scale = 1
    this.shadowColor = "rgba(153,153,153,1)"
Open in Framer

You’ll notice that onTap and onTapEnd are triggered together.

Tap example
onTapStart removes the shadow and onTapEnd adds it again
onTap changes the color

Double tap example

In this example:

  • onTap changes the color
  • onDoubleTap grows or shrinks the layer
layerA.onTap ->
    this.backgroundColor = colorcycler()

layerA.onDoubleTap ->
    if this.scale is 1
        this.animate
            scale: .72
    else
        this.animate
            scale: 1
Open in Framer

So a double tap also makes the layer change color twice.

Double tap example
onTap changes the color
onDoubleTap makes the layer grow or shrink

Force tap

Force tap events only work on devices with pressure sensitivity. That’s why you’ll need an iPhone 6s or newer (with 3D Touch) to use these events on a mobile device.

On the desktop they can be triggered as well: trackpads of recent MacBooks (Pro) have Force Touch sensitivity, as does the Magic Trackpad 2.

Force tap events
onForceTapChange 🔃Change of the tap pressure.
onForceTapStartTriggered when the tap pressure passes a certain threshold (70%).
onForceTapSame as onForceTapStart.
onForceTapEndTriggered when the pressure drops back under 70%.
  • On an iPhone onForceTapStart and onForceTap trigger when the pressure is at 70% of the maximum detectable force.
  • On a MacBook (or Magic Trackpad 2) this happens when you Force Click (there’s haptic and audible feedback).

Force tap example

  • onForceTapChange changes the size of the transparent circle and shows event.force as a percentage
  • onForceTap makes the center circle green
  • onForceTapEnd makes the circle blue again
layerA.onForceTapChange ->
    # Grows the circle
    # Shows ‘event.force’ as a percentage

layerA.onForceTap ->
    # is called when event.force is at 0.7
    this.backgroundColor = forceTapColor    # green

layerA.onForceTapEnd ->
    # is called when event.force drops below 0.7
    this.backgroundColor = defaultColor # blue
Open in Framer

onForceTapStart is not used in this example because it triggers together with onForceTap anyway.

Force tap example on a MacBook Pro
onForceTapStart and onForceTapStart change the color
onForceTapChange makes the outer circle grow
Force tap example on an iPhone
onForceTapStart and onForceTapStart change the color
onForceTapChange makes the outer circle grow

Long press

A long press is triggered when you press down longer than half a second. Like you would do, for instance, to get the app icons to jiggle on an iPhone or iPad.

Long press events
onLongPressStartTriggered after pressing down ½ seconds.
onLongPressSame as onLongPressStart.
onLongPressEndTriggered at release, but only after the start of a long press (not like onTapEnd).

Long press example

In this example:

  • onLongPressStart shrinks the layer + removes the shadow
  • onLongPress changes the color of the layer
  • onLongPressEnd grows the layer + adds the shadow
layerA.onLongPressStart ->
    # called after pressing down half a second
    this.scale = 0.94
    this.shadowColor = null

layerA.onLongPress ->
    this.backgroundColor = colorcycler()

layerA.onLongPressEnd ->
    # called upon release of a long press
    this.scale = 1
    this.shadowColor = "rgba(153,153,153,1)"
Open in Framer

Notice that onLongPressStart and onLongPress are triggered together.

Long press example
onLongPressStart and onLongPressEnd change the shadow
onLongPress changes the color

Example with all tap events

In this example:

  • onTap changes the color of the layer
  • onDoubleTap changes the scale
  • onLongPress rotates the layer
  • onForceTapChange darkens the layer when the ‘force’ is more than 0.7
layerA.onTap ->
    this.backgroundColor = colorcycler()

layerA.onDoubleTap ->
    # Grow or shrink the layer

layerA.onLongPress ->
    this.animate
        rotation: this.rotation + 45

layerA.onForceTapChange ->
    # Darker color when ‘event.force‘ is over 0.7
Open in Framer
Example with all tap events combined
onTap changes the color, onDoubleTap the scale
onLongPress rotates, and onForceTapChange darkens the color (when force is more than 0.7)

Overview of the tap events

Overview of the tap events
Open in Framer

Leave a Reply