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

What is Framer? Join the Community
Return to index
Arvi Raquel-Santos
Posted Feb 18 - Read on Facebook

Anyone have any good examples of how to enable vertical dragging of a card while keeping the horizontal swipes intact? I'm looking to horizontally swipe to view cards and vertically drag a card to the bottom to save to view later.

This is where I am at the moment but haven't been able to figure out how to grab a card since all the cards are in a SuperLayer— http://share.framerjs.com/n6v3ueib2o6r/

5 Comments

George Kedenburg III

hmmm this should be fun

Arvi Raquel-Santos

I aim to challenge this group? Ha ha. Seriously is this a lot harder than I think it is?

George Kedenburg III

nah you just need some (maybe a lot) more logic... basically we need to put a conditional in the dragmove that is dependent on the direction of the drag. to get that we need to grab the event x and y in the dragstart event and compare that to the x and y in dragmove. if we're going left or right then we do the normal swipe but if we're going up and down we swipe the card thats on screen. and then if we cross a threshold we animate that card off screen and move the remaining cards in (but this will complicate our math for the pagination because now we have less cards).

George Kedenburg III

also to go even further youll want to lock their direction once you know it to prevent weirdness of diagonal swipes

Jordan Robert Dobson

Yep once you detect a direction you would then set the scrollable value for that axis to zero

Read the entire post on Facebook