A Framer Studio module for deivce sensor to your project.
Demo - Orientation Sensor
Demo - Motion Sensor
check it on the device that provides the motion sensor (mobile).
https://vimeo.com/196395840 -
Full version Preview
- Multiple browser supported
- Orientation Sensor
- Motion Sensor
Copy the "module" folder and paste it into your prototype folder
More info about modules for Framer Studio: FramerJS Docs - Modules
- 360° Viewer : 360 degree rotation viewer
- Lenticular : 2 ~ 3 image transition
- Simulator for Desktop : Orientation Simulator
Sensor service
Get system service
- service [string] : service
Orientation sensor
Motion sensor
[Number] Coefficient of sensor transfer value
Since the sensor of the device reacts very sensitively, if the value transmitted from the sensor is used as it is, the small movement of the device will cause it to shake or vibrate. You can adjust the value to obtain a smoothly tuned value
When the sensor value changes
Events.Change - New sensor value.
Sensor.onChange(orientation or motion)
-
orientation [Object] - Orientation values (Orientation Sensor)
- alpha [Double] - Z-axis rotation
- beta [Double] - X-axis rotation
- gamma [Double] - Y-axis rotation
-
motion [Object] - Motion values (Motion Sensor)
- acceleration
- x [Double]
- y [Double]
- z [Double]
- accelerationIncludingGravity
- x [Double]
- y [Double]
- z [Double]
- rotationRate
- alpha [Double]
- beta [Double]
- gamma [Double]
- interval [Double]
- acceleration
More info about Device Orientation Event : W3C Device Orientation Event Specification
Screen.backgroundColor = "gray"#
SIZE = 200
# Cube
cube = new Layer
point: Align.center
size: SIZE
rotationY: 0, rotationX: -30
style:
transformStyle: "preserve-3d"
"-webkit-transform-style": "preserve-3d"
backgroundColor: ""
# Face properties
properties =
size: SIZE
style:
fontSize: "20px", fontWeight: "500", lineHeight: "#{SIZE}px"
textAlign: "center", textTransform: "uppercase"
boxShadow: "inset 0 0 30px rgba(0,0,0,0.2)"
color: "rgba(0,0,0,.5)"
backgroundColor: "rgba(255,255,255,1.1)"
parent: cube
# Front
front = new Layer _.extend _.clone(properties), html: "front", z: 100
# Back
back = new Layer _.extend _.clone(properties), html: "back", z: -100, rotationY: 180
# Top
top = new Layer _.extend _.clone(properties), html: "top", rotationX: 90, y: -100
# Bottom
bottom = new Layer _.extend _.clone(properties), html: "bottom", rotationX: -90, y: 100
# Left
left = new Layer _.extend _.clone(properties), html: "left", rotationY: -90, x: -100
# RightSe
right = new Layer _.extend _.clone(properties), html: "right", rotationY: 90, x: 100# Module
require 'System'
# Sensor manager
sensorManager = getSystemService(Context.SENSOR_SERVICE)
# Sensor : Orientation
sensorOrientation = sensorManager.getDefaultSensor(Sensor.TYPE_ORIENTATION)
if sensorOrientation
sensorOrientation.smooth = 0.1
sensorOrientation.onChange (event) ->
cube.rotationX = -(event.beta) * 2 + 60
cube.rotationY = (event.gamma) * 2or
# Module
require 'System'
# Sensor manager
sensorManager = getSystemService(Context.SENSOR_SERVICE)
# Sensor : Motion
sensorMotion = sensorManager.getDefaultSensor(Sensor.TYPE_MOTION)
if sensorMotion
sensorMotion.smooth = 0.005
sensorMotion.onChange (event) ->
cube.rotationX -= event.rotationRate.alpha
cube.rotationY += event.rotationRate.beta
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent