Framer Classic » Events » Native browser events

Native browser events

You might not know this, but web browsers (like Framer’s Preview Window) don’t have ‘tap’ events. Framer’s events are built upon the native ‘click,’ ‘touch’ and ‘mouse’ events.

The events in this section are all simple wrappers around JavaScript’s ‘click‘, ‘dblclick‘, ‘touchstart’ etc. So not all of the following events will work on touch devices, and they also lack most of Framer’s Gesture Event Properties.

Click and Double click

Good to know: while onDoubleClick simply wraps JavaScript’s ‘dblclick’ event, Framer’s onDoubleTap uses a timer (it listens for taps that are 0.25 seconds apart).

Click and Double click events
onClickA click or tap on the layer. Note that it’ll be triggered at the end of the click.
onDoubleClickTwo fast clicks on the layer.

Surprisingly, onClick reacts to taps on touch devices, but onDoubleClick does not.

Click and Double click example

The events in this example:

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

layerA.onDoubleClick ->
    if this.scale is 1
        this.animate
            scale: .72
    else
        this.animate
            scale: 1
Download Framer project

The above prototype also contains these lines in the onClick event handler (they are commented out):

print "event.start.x = "
print event.start       # doesn’t work
print "event.point = "
print event.point       # does work

I’ve put them there to show that although the gesture event properties are not supported for native events, some of them do work.

They are there to show that although the gesture event properties are not supported for native events, some of them do work.

event.start will return an undefined, but event.point (and also event.contextPoint) will contain a value.

Anyway, if needed, you can always fall back to directly accessing the native event properties of the browser.

Click and Double click example
onClick changes the color
onDoubleClick makes the layer grow or shrink

Touch events

You could see these as the native versions of onTapStart and onTapEnd.

Touch events
onTouchStartStart of a touch or click. (the press down)
onTouchMove 🔃A touch move or mouse drag. (On the desktop also triggered when the pointer merely hovers over the layer.)
onTouchEndEnd of a touch or click. (the release)

To catch a hover state when prototyping a website or desktop app you could, of course, use the onMouseMove mouse event, but onTouchMove has the advantage that it also works on touch devices (on which you’ll have to be pressing down, obviously).

Touch events example

In this prototype:

  • onTouchStart shrinks the layer + removes the shadow
  • onTouchMove changes hue and lightness values according to the x and y-positions
  • onTouchEnd grows the layer + adds the shadow
layerA.onTouchStart ->
    this.scale = 0.94
    this.shadowColor = null

layerA.onTouchMove ->
    # getting the first touch with Events.touchEvent
    # calculating Hue and Lightness values
    # changing the layer’s backgroundColor

layerA.onTouchEnd ->
    this.scale = 1
    this.shadowColor = "rgba(153,153,153,1)"
Download Framer project

On touch devices there will be a ‘touch’ for each finger, with Events.touchEvent we can extract just the first one.

Touch events example
onTouchMove changes the color
onTouchStart and onTouchEnd change the shadow

Mouse events

Naturally, most of these will only trigger in Framer or a desktop browser. You can use them for prototyping a website or desktop application.

Mouse events
onMouseOverThe mouse cursor entered the layer.
onMouseMove 🔃The mouse cursor moves over the layer.
onMouseOutThe mouse cursor left the layer.
onMouseDownThe mouse button is pressed down while on the layer.
onMouseUpThe mouse button is released while on the layer.
onMouseWheel 🔃The mouse wheel is scrolled. (Note: The mouse cursor has to be over the layer.)

Mouse events example

In this prototype:

  • onMouseOver shows a 🐭 on the layer
  • onMouseOut removes it again
  • onMouseMove changes the hue and lightness values depending on the x and y-positions
  • onMouseDown shrinks the layer
  • onMouseUp grows it back to the original size
  • onMouseWheel rotates the layer around the x-axis
layerA.onMouseOver ->
    this.html = "🐭"
layerA.onMouseMove ->
    # making Hue and Lightness values
    # giving the layer a new backgroundColor
layerA.onMouseDown ->
    this.scale = 0.94
layerA.onMouseUp ->
    this.scale = 1
layerA.onMouseOut ->
    this.html = ""
Framer.Device.screen.onMouseWheel ->
    layerA.animate
        rotationX: layerA.rotationX + event.deltaY
Download Framer project

The mouse wheel event is attached to the screen so that it also triggers when the pointer is not over the layer.

Mouse events example
onMouseOver, onMouseOut, onMouseDown, onMouseUp, onMouseMove, and onMouseWheel

Accessing native event properties

As you know, in the function called by the event, you can use the keyword this to refer to the layer.

layerA = new Layer
layerA.onClick ->
    print this

» <Layer layerA id:1 (0, 0) 200x200>

There’s also information about the event itself, in the aptly named keyword event.

layerA.onClick ->
    print event

» <MouseEvent , contextPoint:}>

You can see that it’s a MouseEvent, on a touch device it would be a ‘TouchEvent’.

A MouseEvent contains a lot of information, even things like whether the Alt, Ctrl or Shift keys were pressed when you clicked.

All the MouseEvent’s properties can be viewed in the Web Console. To do this, change your code so that it logs to the Web Console instead of prints to the Framer Console.

layerA.onClick ->
    console.log event
Download Framer project

Click the Inspect button (bottom left) to open the Web Console.

When you click on the layer, you will see a MouseEvent object appear in the Web Console. You can open it to look at its properties—it even contains a few other objects.

The Web Inspector’s Console with the details of a MouseEvent

Alternatively, you can consult JavaScript’s MouseEvent documentation to see which properties are available.

Note that from an onMouseWheel event you’ll get a ‘wheel’ object.

And for the sake of completeness, here’s the documentation of the ‘TouchEvent’ object.

Example of accessing a native event property

This example uses the deltaY property of the ‘wheel’ event object to rotate a layer:

Framer.Device.screen.onMouseWheel ->
    layerA.animate
        rotationX: layerA.rotationX + event.deltaY
Download Framer project
Example of accessing a native event property
The mouse wheel triggers rotation along the x-axis.

Getting the touch event

On a touch device, you can have more than one finger on the screen, so there might be several touches inside event.

You could grab the first one, like this:

# getting the x-position
print event.touches[0].clientX

…but this code will give an error on the desktop.

It’s better to pass the event object to the Events.touchEvent(). This function will give you the first one in the array of ‘touches’, and will also work on a desktop browser.

# getting the x-position
myTouchEvent = Events.touchEvent event

print touchEvent.clientX

Or shorter:

# getting the x-position
print Events.touchEvent(event).clientX

Overview of the native browser events

Overview of the native browser events
Download Framer project

Leave a Reply