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?
You can add hotspots via layers which have the opacity set to zero. Hacky but works.
How do you do that outside the normal canvas area?
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.
this may not be totally helpful but you could use your own mask inside of framer...
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)
Amazing. First choice looks like the right one for me. Thank you Benjamin