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 | |
---|---|
onClick | A click or tap on the layer. Note that it’ll be triggered at the end of the click. |
onDoubleClick | Two 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 coloronDoubleClick
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

onClick
changes the coloronDoubleClick
makes the layer grow or shrinkTouch events
You could see these as the native versions of onTapStart
and onTapEnd
.
Touch events | |
---|---|
onTouchStart | Start 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.) |
onTouchEnd | End 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 shadowonTouchMove
changes hue and lightness values according to the x and y-positionsonTouchEnd
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

onTouchMove
changes the coloronTouchStart
and onTouchEnd
change the shadowMouse 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 | |
---|---|
onMouseOver | The mouse cursor entered the layer. |
onMouseMove 🔃 | The mouse cursor moves over the layer. |
onMouseOut | The mouse cursor left the layer. |
onMouseDown | The mouse button is pressed down while on the layer. |
onMouseUp | The 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 layeronMouseOut
removes it againonMouseMove
changes the hue and lightness values depending on the x and y-positionsonMouseDown
shrinks the layeronMouseUp
grows it back to the original sizeonMouseWheel
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

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