Prototyping with the motion sensor using Framer.js

Create impressive parallax effects in your prototypes using the motion sensor and a few lines of code.

accX = 0;
accY = 0;
window.addEventListener("devicemotion", function(event) {
accX = event.accelerationIncludingGravity.x;
accY = event.accelerationIncludingGravity.y * -1;
});
View.midX = 60 + accX * 3;
View.midY = 60 + accY * 3;
Background.x = accX * 3;
Background.y = accY * 3;
Content.x = accX * 3;
Content.y = accY * 3;
Background.width = 720;
Background.height = 1216;
Background.x = accX * -3 — 40;
Background.y = accY * -3 — 40;
accXsmooth = 0;
accYsmooth = 0;
factor = 0.4;
window.addEventListener("devicemotion", function(event) {
accX = event.accelerationIncludingGravity.x;
accY = event.accelerationIncludingGravity.y * -1;
accXsmooth = factor * accXsmooth + (1 - factor) * accX;
accYsmooth = factor * accYsmooth + (1 - factor) * accY;
Content.x = accX * 3;
Content.y = accY * 3;
Background.x = accXsmooth * -3 — 40;
Background.y = accYsmooth * -3 — 40;
});

designer turned grumpy pm. co-founder @joinbranch (acq by fb).

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store