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

What is Framer? Join the Community
Return to index
Hoffer Gábor
Posted Oct 04 - Read on Facebook

Did you ever wanted a proto that works portrait and landscape but could not handle the switch on the real device but only in Framer Studio? Just like me.

I tried it all. Framer.Device.orientation, Framer.Device.orientationName, Framer.Device.on "change:orientation", Screen.on "change:width", even good ol' javascript like window.addEventListener("orientationchange", function() {...});

Some of it works in Studio, some of it in the device. None of these work on both. So then what?

Thought you would find this useful. Beware! Hacky solution, but works flawlessly:

# variable to store orientation (system doesn't cut it)
screenOrientation = "donnoyet"

# listening to screen ratio change
Utils.interval 0.2, ->
switch
when Screen.width / Screen.height > 1
landscapeHandler()
when Screen.width / Screen.height < 1
portraitHandler()

landscapeHandler = () ->
if screenOrientation != "landscape"
screenOrientation = "landscape"
# actual landscape switching code should be here
landscapeSetup()

portraitHandler = () ->
if screenOrientation != "portrait"
screenOrientation = "portrait"
# actual portrait switching code should be here
portraitSetup()

Cheers

Flame from Prezi

5 Comments

Hoffer Gábor

indentation:

Hoffer Gábor

I'll make this prettier and put it in a module/snippet in a couple of days...

Joshua Tucker

Hey Hoffer! Nice work! I know how it feels being in this situation :P. However, you can eliminate the interval all together by setting up a check as to whether the device is Framer or mobile and setup listeners accordingly. You were on the right track with listening for Framer.Device orientation changes and all that stuff. It's all about the combo!

The best part about this as well is that you can be more granular about the type of orientation. It's not just portrait or landscape, but its upside down portrait, or clockwise landscape, etc. because you're using the actual numbers (even from window.orientation).

The project I put together is available here too: http://share.framerjs.com/9smkv99eq5ix/

Let me know what you think. Cheers!

Jordan Robert Dobson

#framercode

James Muirhead

Great solution, Joshua. Thanks again!

Read the entire post on Facebook