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

What is Framer? Join the Community
Return to index
Justin Fraga
Posted Jan 14 - Read on Facebook

Hi Friends,

I'm attempting a larger format prototype where I switch between multiple "views", which are parent layers holding a a mix of imagery and scroll components, etc.

I am having a lot of trouble finding a method that allows the active view to also be "on top" so gestures will register. It seems like "bringToFront()" isn't working when I try to initialize one of the views as the default, for example. I'm also having no luck using ".index". All views appear to be siblings so I don't know what's wrong.

- Should I use opacity or "visible" for the inactive states of the views?
- Do I need to place all the views into a super layer for things like indexing to work, even though they're all siblings now?
** What are some general methods others have used when attempting something similar?**

Thanks in advance!

3 Comments

Jonas Treub

Can you share an example that highlights the issues?

Justin Fraga

Okay, well first I'll focus on "index" because this is a point of confusion. This example code is from the Docs:

layerA = new Layer
⌙ backgroundColor: "red"
layerB = new Layer
⌙ backgroundColor: "blue"

# Draw layerB on top
layerA.index = 2
layerB.index = 1

This doesn't draw layerB "on top" (unless I'm confused about the meaning of "top.") This puts layerB "beneath" layerA and out of view.

Jonas Treub

The example in the docs is wrong, I'll file an issue. The index property behaves just like z-index in HTML. The higher the value the more on top it will render compared to its sibling layers.

I would not recommend using the index property. There are other functions that are easier to use:

layer.bringToFront()
layer.sendToBack()
layer.placeBefore(layerB)
layer.placeBehind(layerB)

Read the entire post on Facebook