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

What is Framer? Join the Community
Return to index
Benjamin Fritz
Posted Feb 17 - Read on Facebook

Hello community,

I have a basic beginner's question:
I set up an Android app in Sketch where all the different screens are on their own artboards so I got a flow of the entire app. The app's navigation is handled via a standard NavDrawer / "Hamburger" menu which is also on a separate artboard with its semitransparent overlay beneath it.

I try to build a basic prototype in Framer and I'm now at the point where I set up the initial screens and the animation for the hamburger menu to slide in and out. How do I ideally change the order of the different screens/artboards when tapping on their respective item in the navigation while keeping the menu the top most layer?

As far as I understand it, it's basically a stack of screens overlaying each other and by selecting the item in the menu I would pick the respective screen and move it on top of all others on the index or z-axis. Is this approach the right one and how do I accomplish this basic interaction in my prototype?

Thanks so much in advance for your help! I heard only great things about this group so far, hope you can help me.

6 Comments

Floris Verloop

There are a couple of handy functions for this. Take a look at placeBehind, placeBefore, sendToBack, bringToFront in the documentation: http://framerjs.com/docs/#layer.placeBefore

Example: http://share.framerjs.com/y89647nzp0vy/

Benjamin Fritz

Yeah, I kinda managed it with setting the index now on tap on a navigational link. I need to write a function though I guess to not specify the layer by its name all the time for each instance a screen needs to be switched but by something like "foremostscreen" set index to 2 and "newscreen" set index to 1.

Floris Verloop

Couldn't you then just do → newScreen.bringToFront()?

Benjamin Fritz

bringToFront would place it on top of the Hamburger. Tried placeBehind() the Hamburger but then I couldn't trigger the Hamburger anymore.

Floris Verloop

Could you share the project, so I can take a look?

Benjamin Fritz

Unfortunately it's under a NDA but for now the index-switching works, thanks for your help so far :)

Read the entire post on Facebook