Javascript Accelerometer Demo and Source

IOS 4.2 (with new Safari Mobile) has the possibility to read sensor data like accelerometer and gyroscope directly from Javascript.

New Javascript objects and event handler

From javascript point of view, we have:

  • new handler window.ondevicemotion
  • new event object:
    • event.accelerationGravity, with x, y, z attributes
    • event.accelerationIncludingGravity, with x, y, z attributes
    • event.rotationRate, with alpha, beta, gamma attributes

Code Snip

window.ondevicemotion = function(event) {
	var accelerationX = event.accelerationIncludingGravity.x;
	var accelerationY = event.accelerationIncludingGravity.y;
	var accelerationZ = event.accelerationIncludingGravity.z;


Online Demo (require Safari Mobile)


DeviceMotionEvent Class
DeviceOrientationEvent Class

This entry was posted in Ipad, Iphone, Javascript and tagged , , , , . Bookmark the permalink.

24 Responses to Javascript Accelerometer Demo and Source

  1. social workers says:

    this post is very usefull thx!

  2. Excellent. I’m using this in my upcoming website:

  3. That is very fascinating, You’re a very professional blogger. I’ve joined your feed and look forward to looking for extra of your excellent post. Also, I’ve shared your website in my social networks

  4. Ian Gilman says:

    Great info! I believe it should be event.acceleration rather than event.accelerationGravity, though.

  5. Pete Smith says:


    This is great… but have you experienced reverse gravity if you have the iPad rotated a certain way on load?

    The address bar is at the top but the gravity is reversed.

    Is there a way of detecting this / reversing the calculations?



  6. Alberto says:

    Hi Pete,
    to check che orientation of the iPad (ex: portrait upside-down) you can use the window.orientation property.
    You can also use the orientationchange event to trigger some action when orientation change:

    window.addEventListener(‘orientationchange’, updateOrientation, false);
    function updateOrientation() {
    var orientation = window.orientation;
    switch (orientation) {
    // case …

  7. Michael says:

    Why am i sooo noob… I would like to have a script that will scroll my website in mobile style using the accelerometer.

    It seems that i don’t have the knowledge to write it myself. Could somebody help me to do it?

    Thank you in advance

  8. raslanove says:

    Thank you very much, this is very helpful 🙂

  9. Pingback: Free Fall | Blue-Bears

  10. ei says:

    hi thz for ur post…i didn’t how to write this one before i haven’t seen ur post. if u have another example related to Accelerometer ,pls share me.

  11. Basharat says:

    do we have to add some library into our code for device motion events if yes than kindly can u give me some link from where i can get that library..

  12. tamberg says:

    Works on my Mac OSX 10.9.1 in Chrome!

  13. Roland says:

    Great Suggestion!

    This also works on Android 4.2 with Chrome, Android Browser too. The G-direction is just negative in comparison to IOS.


  14. Bastian says:

    There is definately a lot to know about this issue. I love all the points you have made.

  15. energy says:

    Generally I wouldn’t go through report about blogs, however wish to declare that this kind of write-up extremely required me to carry out and so! Your way of writing continues to be surprised me personally. Thank you, extremely wonderful article.

  16. Gilda Coder says:

    I really appreciate your piece of work, Great post.

  17. TD says:

    What are the units that the program calculates? ie mph, ft/s or m/s?

  18. aakash says:

    this works on ? titanium platform ????????

  19. Nice Sharing! Thanks for this helpful information I agree with all points you have given to us. I will follow all of them.- Window replacement Richmond

  20. Pingback: Make your thumb comfortable on a large screen mobile device – UX Study/Resources

  21. Page2PagePro says:

    Test working in following:
    iPhone 5 iOS 9.3.4 + Safari = Working
    Android 5.0 (Samsung Note 3) + Samsung native Internet (4.0.10-53) = Working (inverted X/Y)
    Android 5.0 (Samsung Note 3) + Maxthon ( Build 2900) = Working (inverted X/Y)
    Android 5.0 (Samsung Note 3) + Naked (1.0 build 115) = Working (inverted X/Y)
    Android 5.0 (Samsung Note 3) + Chrome(52.0.2743.98) = Working (inverted X/Y)
    Android 5.0 (Samsung Note 3) + Puffin ( = Not working

  22. Chris says:

    Nice demo, thanks!

    BTW, the Apple Developer API links broke. 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *