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

What is Framer? Join the Community
Return to index
Alex Maximets
Posted Feb 17 - Read on Facebook

Hi everyone,
Having a bit of an issue with functions running in arrays. Currently all the buttons change states on each card as they should, but when I press the button that has a function attached it runs the animations only on the last card. Any help would be much appreciated!
Thanks

13 Comments

Jonas Treub

Hi Alexander. When you create elements in a loop each iteration your variables are overridden. That's why when you target an element by its variable it only effects the last one. In our programming primer we have dedicated an entire section to this scoping problem. You can read about it here: https://framer.com/getstarted/programming/#scope

Alex Maximets

Thank you Jonas that helped me a lot. Using the "do" method I was able to target each of the layers within the cards. Moving on from that I'm having issue targeting layers that i didn't click, i.e if I click obj[1] i want it to stay where it is but all the other objects in obj array to disappear. Is that possible to do using "do" method?

Alex Maximets

something like:
for i in [0...cardNum]
cardCont=cardConts[i]= new Layer
parent:backGr.content
width:660
index:50
name:names[i]+" Container"
height:203
backgroundColor: "white"
y: 228*i+28
cardCont.centerX()

names.forEach (cat,i) ->
card=cards[i]= new Layer
parent:cardConts[i]
backgroundColor: "white"
name:"card "+ "#{i+1}"
width:638
clip:true
height: 178
card.center()
do (card,cardCont) ->
card.onClick ->
not card.parent.animate
properties:
y:maxHeight

Jonas Treub

You can store all layers in an array (group). Then you can iterate over that entire array and check for each layer if it is the one you clicked or not. Depending on that check you can either hide them or transition them to a detail view for example.

Alex Maximets

Yeah I thought of that tried doing something like: iconWhy[i].on Events.Click, ->
for l, index in iconWhy
if iconWhy[i] == l
l.states.switch("alt")
pointer.animate
properties:
x: l.x+((l.width-98))/2
time:0.8
whyDesc.snapToPage(contentD[index],true)

else
l.states.switch("og")

Alex Maximets

but can't seem to incorporate the "do" method as well. If i just use this then it only catches the last object in my array that i didn't click and hides it

Jonas Treub

Can you share a real example?

Alex Maximets

sure give me a sec

Alex Maximets

i seem to have got a last-minute breakthrough Jonas, but it's still not exactly what i need

Alex Maximets

so now if i press any of the big blue layers the other ones will disappear, but i need only the ones that are higher than iconWhy[i] that i clicked to disappear. in other words, if I press iconWhy[1] i want iconWhy[0] and iconWhy[1] to stay where they are and the rest to move off screen and when I click it again they need to return to their previous position. Can you please help Jonas

Jonas Treub

You are almost there. Just use a simple comparison of the y values.

Alex Maximets

sorted out the returning to previous position part, which was easy. as for the "comparison of y values" I have no idea what you mean, sorry. https://framer.cloud/xBibM

Read the entire post on Facebook