Sensors
You can access native sensors of mobile devices, like the accelerometer in realtime. These can be accessed from within the Snippets menu of Framer, too. Orientation, Compass and Motion are supported on iOS and Android.
Orientation
The deviceorientation event allows you to detect the physical device orientation. The 3 properties below are especially useful for prototyping. Learn more here.
- alpha — device motion around the z axis from 0 to 360
- beta — device motion around the x axis from -180 to 180
- gamma — device motion around the y axis from -90 to 90
# Preview on a mobile device
window.addEventListener "deviceorientation", (event) ->
print "gamma: " + event.gamma
Compass
The webkitCompassHeading property can be used alongside orientation to align with the compass heading on iOS devices. Learn more here.
# Preview on a mobile device
window.addEventListener "deviceorientation", (event) ->
if event.webkitCompassHeading
heading = event.webkitCompassHeading
else
heading = event.alpha
print "heading: " + heading
Motion
The devicemotion event allows you to detect the device acceleration. The 3 properties below are especially useful for prototyping. Learn more here.
- acceleration.x — acceleration around the west to east axis
- acceleration.y — acceleration around the south to north axis
- acceleration.z — acceleration around the down to up axis
# Preview on a mobile device
window.addEventListener "devicemotion", (event) ->
print "x:" + event.acceleration.x
print "y: " + event.acceleration.y
print "z: " + event.acceleration.z