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

What is Framer? Join the Community
Return to index
Kyle O'Reilly
Posted Aug 23 - Read on Facebook

Hey there! New to framer, and my favorite command so far is "visible = true/false", as I'm generally just importing my design elements from Sketch, then showing/hiding them with various Click events.

I haven't yet figured out how to toggle a show, however. For example, clicking the same expand/collapse button should show or hide the elements below it. Once I get an element to show, I'm not sure how to hide it again (I've tried using "if":visible")", but that doesn't work).

I know framer.js is much more powerful than this though, so I'm open to other ways of skinning the same cat.



Alex Hazel

Use the "state machine" for this. Set up states for your layers.

Docs on "States" can be found here:

Examples here:

Click on an element to cycle through the states

myButton.on Events.Click, ->

Mike Feldstein

element.visible = !element.visible ?

Michael Wang

What Alex said ^. But just for reference you can refer to the "visible" property of the element. i.e. "element.visible" will return true/false

Alex Hazel

Pfft....I had no idea you could do that Michael Wang.....Awesome!

Does that mean any property of the element returns a value?

would bg.backgroundColor return a color? and is the color value a string or a hex?

Jordan Robert Dobson

^try it.

Read the entire post on Facebook