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

What is Framer? Join the Community
Return to index
Patryk Sobczak
Posted Oct 20 - Read on Facebook

Hey. What is the best way to handle a tabbed navigation? Toggling the visibility of content layers? Also, two more questions:

1. As for the tabs themselves, I'd like to have a different font / icon color between the active and regular states, and have the green background change it's x position depending on which tab has been tapped. The easiest way would be to import the text and icon as vector / SVG elements and change the color in code as the tabs state changes - however, importing and modifying SVGs isn't supported, is it? Am I stuck with having to toggle static images?

2. Does framer support something like the html image map feature which would allow me make only a certain area of a layer tapable?

Thanks!

5 Comments

Patryk Sobczak

another question: is there an easy way to blur everything BUT the front layer? (as a background for a popup for example)

Koen Bok

1. Kind of. But you can also layer.style to directly toggle css styles.
2. That would require a "hit test" meaning comparing the location of the click to a specific area. There is no nice helper for this in Framer, but shouldn't be too hard to figure out yourself.

Patryk Sobczak

wasn't aware layer.styles existed, thanks! opens a whole bunch of new doors :)

Juan Sanchez

2. I just used transparent layers as "hotspots". Usually as transparent lime green while working, then just set the opacity to 0 before sending it out for review.

Patryk Sobczak

Thanks for the help guys, just managed to finish my first prototype (https://dribbble.com/shots/1772214-ShopFinder-app-prototype?list=users&offset=0) without ANY prior js experience, what an awesome piece of software!

Read the entire post on Facebook