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

What is Framer? Join the Community
Return to index
Tom Smeeton
Posted Sep 01 - Read on Facebook

Hey Framers. I'm wondering if anyone can help me. I've got a project in which I want to change the properties of different layers in an array individually using states. So far, I've managed to be able to address each layer individually, by 'push'ing them to an empty array, but when trying to cycle states I find that the properties defined in the state are not actually being applied to the layers.

In English: I want to change the background layer of the first layer of the array to red, by clicking on it. And the second layer to green by clicking on it. They exist inside a scrollComponent too. The project is here: http://share.framerjs.com/sqlysr7hlcgz/ I would love some help! :)

2 Comments

Javier Chávarri

The problem is in the event callback (the function that is called when there's a Click event).

Inside this fuction you are using a variable named 'block'. But this variable value, after ending the for loop that is just before, is always keeping the value of the last block of the grid. You can see, in your example, that when you click on the first button, the last cell of the grid becomes red (you'll need to scroll to the bottom! :) )

To solve this, just add this to your events callbacks:
# On clicking first block, change state to 'red'
blockCells[0].on Events.Click, (event, layer) ->
layer.states.next("red", "default")

# On clicking second block, change state to 'green'
blockCells[1].on Events.Click, (event, layer) -> layer.states.next("green", "default")

This way you make sure that the layer being modified is the one that was clicked.

Tom Smeeton

Brilliant! Thanks Javier! :D

Read the entire post on Facebook