Hey everybody! I'm trying to prototype a Card Controller that will allow user to navigate through the stack (hierarchy) of cards and to dismiss one or several cards at once. The video roughly shows how it can work. When I swipe down the top card, all the previous ones also slide down but with half speed (then 1/4, 1/8 etc). After I continue dragging the top card down the stack splits into two separate stacks. When I release my finger, only cards in the stack in the bottom will be dismissed. There's a lot of UX work to be done further, but now that's all I'm trying to accomplish as a first step.
I have several questions here and would really appreciate your help guys!
1. I generate cards as an array cards[1..count] and put a listener on each of them that animates the previous one:
for index in [count..2] by -1
cards[index].on "change:y", ->
But this code doesn't seem to compile and I don't know why (disclaimer: I'm not a coder, just a silly designer). What am I doing wrong? http://share.framerjs.com/el10jkfoe5sf/
2. I temporary got rid of this loop and did the work manually (http://share.framerjs.com/5b2ee1tmh4hx/), but now when I dismiss the top card, all the previous cards are obviously sliding away with it, but I don't need them to. I want them to follow the next card right until the point when I'm releasing the finger from screen. So how do I stop listening to cards[index].on "change:y" event in this case? I've read the docs and understood that I have to wrap this into named event and then call .off thing, but I can't figure out how to implement this one.
And here's the super-dirty prototype of how I want cards to split into two stacks, sorry for the messy code, I wrote this after a week of learning Framer with no prior coding experience :) http://share.framerjs.com/a35o84ffjugq/