Mouse movement IX to Accelerometer movement on iOS

I’ve been wanting to try this for a while.

This is a test of translating an iOS device’s orientation using the accelerometer to control the mouse movement interaction in webflow.

https://credit-card-animation.webflow.io/

If you visit this page on an iOS device on iOS >= 13 you have to click the text below the button and allow device orientation before it will work.

This is just a test to see if it is possible :slight_smile:

5 Likes

This is pretty awesome, and opens so many possibilities on mobile, well done !!!

But is there a way to avoid having to click the button to allow using device orientation ? It would make the UX so much better being able to bypass this…

1 Like

@Pasint I agree, I really wish there was a way to bypass having to click the button to allow using device orientation… It seems that before ios 12.2 it was possible however from ios 12.2 up until 13 it required the user to have a setting enabled in safari preferences… from 13+ it now requires the request to come from a click event.

I’ll be looking into this more if I have some spare time and get bored, but I just wanted to show that it is at least possible :slight_smile:

I found the bulk of the code to make it work on https://all-layers.webflow.io
That code directly didn’t work on iOS 13 so I did some digging, you can view my source code to see how I got it to work.

1 Like

This is awesome! Could you share a read-only of your webflow project so I can see how you did this? Or could you post the code you used? Thanks!

1 Like

Hi, this doesn’t seem to work anymore, any ideas?

This is awesome. Is there a way to have this similar response to variable fonts?

Hey! Can you please describe how exactly did you make the ‘allow orientation access’ button work? I have no idea how to go about this in webflow.