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

What is Framer? Join the Community
Return to index
Kees Plattel
Posted Jul 15 - Read on Facebook

Hey!

I've got an array of objects created by a for loop (A set of cards, that stack on top of each other).

I want the top card to be placed on the bottom (Currently using 'sentToBack()' for this) once it's dragged beyond the borders of the screen. When it's no dragged that far, it needs to snap back.

How would you approach it? I currently have something like this:

for cards in [0...amountOfPages]
card = new Layer
name: "card_" + "#{cards}"
image: "images/card_#{cards}.png"
width: 704, height: 964
rotation: Utils.randomNumber(-2,2)
superLayer: stackSuperLayer
index: 1 - (10*amountOfPages)

card.center()
card.draggable.enabled = true
card.draggable.bounce = true

card.on Events.DragEnd, ->
index: ordervalue
card.sendToBack()

The issue is that 'sendToBack()' only works on the first card, probably because of the loop right?

3 Comments

Jonas Treub

When you start listening to an event you can target the specific layer using "this".

card.on Events.DragEnd, ->
[tab]index: ordervalue
[tab]this.sendToBack()

The card variable is overwritten each time you go over the loop. Does that make sense?

Kees Plattel

Totally Jonas, should have thought of that in the first place. Thank you!

Arron J Hunt

Wanted to point out that that loop will probably give you an extra card. Simple fix is: `for cards in [0..amountOfPages-1]`

Read the entire post on Facebook