This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Édouard Urcades
Posted Mar 24 - Read on Facebook

Hi everyone!

I'm currently attempting to re-create the same effect that iOS utilizes on their parallax wallpapers utilizing this module — https://github.com/joshmtucker/OrientationEvents

I'm running into some issues where it appears as though I can only cause motion to happen along one axis at a time, similar to the example given in the github repo.

This is the script I have atm:

sketch = Framer.Importer.load("imported/[email protected]")

module = require "OrientationEvents"

module.OrientationEvents()

screenHeight = Framer.Device.screen.height
screenWidth = Framer.Device.screen.width

sketch.bg.center()
sketch.copy.center()
sketch.diamonds.center()

module.smoothOrientation = .35

if Utils.isMobile()
Utils.interval .1, ->
gamma = module.orientation.gamma
beta = module.orientation.beta

sketch.diamonds.animate
properties:
midX: Utils.modulate(gamma, [-8, 8], [50, 575], true)
midy: Utils.modulate(beta, [-8, 8], [175, 575], true)
curve: "spring(450, 110, 0)"

Anyone have any idea what I might be missing? Thanks! I'm getting the feeling I'm messing up the utils.modulate stuff, which I'm still trying to understand completely.