I just started playing with it, and I wonder if there is a way to move an element in the page, say a box/div, based on 1:1 gesture:

let me explain better: the examples I saw online they act with inertia etc...

i'd just like to move a box to the top of the page when i tilt the iphone up and viceversa.. direct motion, no inertia needed

there is any demo out there close to what I'm talking about?

I just started playing with it, and I wonder if there is a way to move an element in the page, say a box/div, based on 1:1 gesture:

let me explain better: the examples I saw online they act with inertia etc...

i'd just like to move a box to the top of the page when i tilt the iphone up and viceversa.. direct motion, no inertia needed

there is any demo out there close to what I'm talking about?

• javascript
• ios
• webkit
• accelerometer

2 Answers 2

Due to privacy concerns, as of iOS 12.2 Apple is limiting Safari's access to the accelerometer. There's a new switch in Settings > Safari > Motion & Orientation Access and the default is 'OFF'.

There was an ask to gate the feature by asking the user's permission but it doesn't look like that's currently possible.

This move will break most AR and VR experiences for Safari and most folks won't know why it broke.

Further reading:

• https://www.macrumors./2019/02/04/ios-12-2-safari-motion-orientation-access-toggle/
• https://www.fastpany./90302260/in-another-privacy-move-apple-will-limit-websites-access-to-your-iphones-motion-data
• https://www.cultofmac./604562/apple-plans-to-limit-accelerometer-and-gyroscope-access-in-safari-on-ios/

Best workaround I've found so far: https://github./w3c/deviceorientation/issues/57#issuement-481039307

* Update *

Safari 13 Beta added a permission API on iOS for DeviceMotionEvent and DeviceOrientationEvent: https://developer.apple./documentation/safari_release_notes/safari_13_beta_3_release_notes#3314664

As far as I know, Safari can detect gyroscope/accelerometer events with something like:

window.ondevicemotion = function(event) {
// event.accelerationIncludingGravity.x
// event.accelerationIncludingGravity.y
// event.accelerationIncludingGravity.z
}

I know there is a demo with some bouncing balls, but I can't find it. However, you can visit the documentation on Apple's site to develop this for Safari Browsers for more information. See these links:

https://developer.apple./library/safari/#documentation/SafariDOMAdditions/Reference/DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html

https://developer.apple./library/safari/#documentation/SafariDOMAdditions/Reference/DeviceOrientationEventClassRef/DeviceOrientationEvent/DeviceOrientationEvent.html

UPDATE: I know that I had seen it somewhere... Here is the demo, works in an iPhone, Android and Mac (with accelorometer): http://mrdoob./projects/chromeexperiments/ball_pool/