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

What is Framer? Join the Community
Return to index
Alex Bystrov
Posted Aug 10 - Read on Facebook

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", ->
cards[index-1].animate
properties:
y: cards[index].y/2
time: .1

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.

Thanks guys!

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/

10 Comments

Alex Bystrov

Hey hey fellas Jordan Robert Dobson Koen Bok Benjamin Den Boer would really appreciate a few suggestions :)

Jordan Robert Dobson

I'll take a look in a bit! Actually I need to do something similar so I'm really interested / invested in this.

Alex Bystrov

Great! I have a friend who's ready to code an opensource iOS library for this controller when I'll finish the UX

Anton Kartashov

1. You need one more point:

Alex Bystrov

hm it fixed the compiling but animation still doesn't work though..

Anton Kartashov

Seems I fixed both! http://share.framerjs.com/iodszrp09cqh/

Here was a common problem when callback meets loop :) Bypass it through "forEach"

Alex Bystrov

Alex Bystrov

thanks bro!

Benjamin Den Boer

Nice work Alex Bystrov - super interested in seeing this developed further. Keep us in the loop! ;-)

Alex Bystrov

Thanks, sure!

Read the entire post on Facebook