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

What is Framer? Join the Community
Return to index
Julien Stoll
Posted Jul 03 - Read on Facebook

Hello again framer community:)

I'm quite struggling with a navigation concept in framer (see photo). The top row should basically work like nests navigation (see video: https://youtu.be/FoUYeAIo4xU?t=581). The bottom row should NOT behave like in the video but as illustrated on my sketch.

As you can see in the demo you can access the main category with horizontal navigation. Vertically you can navigate from a main category to its subcategory. Unfortunately in the subcategory circles on the left and right from the subcategory of the next main category are visible. I don't want that because it implies you could then navigate to them which shouldn't be the case.

How could I fix that?
I really hope someone has an answer or an example to that since I can't wrap my head around it …

https://framer.cloud/jGnEe

4 Comments

Taco Den Outer

looks this could be fixed by having a three page horizontal scroll pageComponent with a vertical scrollComponent inside each

Juan J. Ramirez

You could potentially generate the page components in the bottom only after a swipeUp happened and then disable the bottom page component after going back to the first row:

Bubble1.parent = page.content
Bubble2.parent = page.content
Bubble3.parent = page.content
Bubble4.parent = page.content

Bubble1_1.visible = false
Bubble2_1.visible = false
Bubble3_1.visible = false

sketch.Bubble1.onSwipeUpStart (event, layer) ->
Bubble1_1.visible = true
Bubble1_1.parent = page.content

But there a lot of better ways to do this. This is just a not ideal suggestion based on what you have so far.

Julien Stoll

Taco Den Outer Do you know an example where something was built like that?

Jonas Treub

Here is an example. I added comments to clarify the code https://framer.cloud/iQtsG

Read the entire post on Facebook