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 element.is(":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.

Thanks!

5 Comments

Alex Hazel

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

Docs on "States" can be found here:
http://framerjs.com/docs.html#layers

Examples here:
http://examples.framerjs.com/#state-machine-basics.framer

Click on an element to cycle through the states

myButton.on Events.Click, ->
myHiddenLayer.states.next()

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