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

What is Framer? Join the Community
Return to index
Gregory Dean Hall
Posted Nov 16 - Read on Facebook

Q: Can i make 1 state with multiple layer properties or do I have to set each layer with multiple states once an event occurs? Newbie. Thanks:)

8 Comments

Benjamin Den Boer

Hey Gregory Dean, you can definitely include multiple properties within a single state. For a layer, you can add multiple states, each with multiple properties that you can then switch to or cycle within, with or without an animation. :-)

From the toolbar in Studio, check out Snippets → "Layer with States" snippet too. It only has a scaling animation, but if you hit enter and add "rotation: 180" for instance, you'll see it accepts multiple properties!

Gregory Dean Hall

ahh, what i meant was - 1 state with multiple layers and their properties

Gregory Dean Hall

i have 4 buttons. each one switches on a set of layers and hides the other 3 sets of layers. how do i do this.

Benjamin Den Boer

Hey Gregory, ah, I see! Sure thing, the easiest way to achieve this is to store multiple layers within an array, and then add the states within a for loop.

See: http://framerjs.com/examples/preview/#animation-states-array.framer#code for an example. :-)

Gregory Dean Hall

okay now a way to switch one on and the others off?

Gregory Dean Hall

4 buttons to do this

Gregory Dean Hall

modes = [mode1prev, mode2prev, mode3prev , mode4prev]

# Loop over array
for layer in modes
layer.states.add
on:
opacity: 1
off:
opacity: 0

mode1unselected.on Events.Click, ->

mode2unselected.on Events.Click, ->

mode3unselected.on Events.Click, ->

mode4unselected.on Events.Click, ->

Benjamin Den Boer

Hey Gregory Dean Hall, this can be done by using the "this" keyword within your array. You can target all of your layers within an event (within the loop), and then specify the clicked layer as well. :-)

Read the entire post on Facebook