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

What is Framer? Join the Community
Return to index
John Anthony Evans
Posted Mar 18 - Read on Facebook

Before I spend too much time trying to hack it, is there a way to add behaviors to Framer.Device. Specifically I'd like to be able to make the home key work, but also it be great to simply define some hit areas etc.

Any thoughts on how to do this?

6 Comments

Harry Brignull

You can add hotspots via layers which have the opacity set to zero. Hacky but works.

John Anthony Evans

How do you do that outside the normal canvas area?

John Anthony Evans

Had to edit the question as I realised I was not specific enough. I want to be able to make the home key work etc. which means adding behaviour to Framer.Device not background layers.

Slghtr Khari

this may not be totally helpful but you could use your own mask inside of framer...

Benjamin Den Boer

Hey John Anthony Evans, there are a few different ways to go about this.

1. Using Framer.DefaultContext.run. The DefaultContext contains the original context, before it gets replaced with the device context. Within this function, you can create layers and define events before the device gets drawn. I've created a little demo that renders a layer at the homeButton, and listens to the click event which triggers an animation within the device.

Making sure it always stays rendered at the correct position - despite the scale/size of the window - it a little tricky, but I've used a few scaling functions to make it work.

If you're resizing your window, make sure to refresh first. I've made the layer visible in the example so you can see where it's positioned. The width/height of the layer automatically scale accordingly as well.

See: http://cl.ly/aGNh/homeButton.mp4
Download: http://share.framerjs.com/qqdx5mw4dfwj/

2. You could remove the clipping from the Framer.Device.phone, seen in this little example from Marcelo Eduardo Oliveira - http://share.framerjs.com/05hz5cpup98d/

I've also created a demo for you using this technique. It requires a little different logic to ensure the homeButton layer is always at the appropriate scale / covering the entire button. Once the screenScale gets below 0.3, we set the scale back to 0.5. This also works. (And without refreshing)

See: http://share.framerjs.com/ktv5p5aslotx/

John Anthony Evans

Amazing. First choice looks like the right one for me. Thank you Benjamin

Read the entire post on Facebook