Bind mouse move events created in Webflow to mobile device tilt events with accelerometers

Step 1:

Create an interaction which occurs on mouse cursor movement over an element

‍

Step 2:

Add this custom code in to the before closing body tag of your site:

<script>
document.querySelectorAll('[data-tilt-to-mouse="1"]').forEach(function(trigger) {
var maxX = trigger.clientWidth;
var maxY = trigger.clientHeight; var centerX = maxX / 2;
var centerY = maxY / 2; var clientX = centerX;
var clientY = centerY;

var X_SENSITIVITY = parseFloat(trigger.getAttribute('data-tilt-to-mouse-x-sensitivity') || 1);
var Y_SENSITIVITY = parseFloat(trigger.getAttribute('data-tilt-to-mouse-y-sensitivity') || 1.6);
var X_OFFSET = parseFloat(trigger.getAttribute('data-tilt-to-mouse-x-offset') || 0);
var Y_OFFSET = parseFloat(trigger.getAttribute('data-tilt-to-mouse-y-offset') || 0);

var clamp = function(lower, upper, n) {
Math.min(Math.max(lower, n), upper);
};

function handleOrientation(event) {
var y = event.beta; // In degree in the range [-180,180]
var x = event.gamma; // In degree in the range [-90,90] clientX = centerX + (maxX * ((x / 90) + X_OFFSET)) * X_SENSITIVITY;
clientY = centerY + (maxY * ((y / 180) + Y_OFFSET)) * Y_SENSITIVITY;

trigger.dispatchEvent(new MouseEvent('mousemove', {
bubbles: true,
cancelable: false,
clientX: clientX,
clientY: clientY,
view: window,
isTrusted: true,
}));
}
window.addEventListener('deviceorientation', handleOrientation);
});
</script>

Step 3:

Add the data attribute of "data-tilt-to-mouse" to the parent element which has the interaction bound to it (body element for full page) and set it equal to "1"

‍

Step 4:

Publish your site and check it out on mobile devices with accelerometers