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).

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

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

Touch events

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

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)"

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

Touch events example

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 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

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

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

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.

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

Example of accessing a native event property

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