Tinder-clone in javascript

Tinder-like moving images:

Have a look at the end result here.
And now let`s go step by step:

[Step 1] http://jsfiddle.net/3y7fogdv/1/embedded/result/

• Check if it actually doing anything: Use requeststAnimationFrame (+big function to make it better)
• The actual moving of the element is done in js using: e.style.transform = 'translate3d('+newX+'px,'+ newY+'px,5px)';
• To return it to first position, add style{transition:all 0.3s;}
• To make sure the image is not dragged by itself:   user-drag: none;  -moz-user-select: none;  -webkit-user-drag: none;

[Step 2] http://jsfiddle.net/3y7fogdv/7/embedded/result/

Lets use a card-style (see here) and move the entire card.

[Step 3] http://jsfiddle.net/3y7fogdv/18/embedded/result/
Add tinder buttons  (V,X) below, add z-index to the .card ( z-index:1;    position: relative; ) so that it will move above them.
Also note that when we move the card down, it causes scrolling (solve by adding overflow:hidden to the main content) , and that the end of the content ends with the end of the buttons instead to extend to the full view. This is solved by a small js, to change main content size according to full size- header height.
Last change is addition of rotation to the transform  rotate( startX-newX)*0.05 + deg

[Step 4] http://jsfiddle.net/3y7fogdv/19/embedded/result/
check the release location on hammer "panend" event, and a check of ev.isFinal and ev.deltaX ev.deltaY.  If it is above a threshold, move it far away.
Also , let`s use multiple cards, so we will use multiple Hammer instances, one for each card. Luckily hammer supports it and hammer events are separated per card.


[Final notes]
On mobile, panning may cause scrolling the window down. To avoid this, add:
        $(document).bind('touchmove', function(e) {
            e.preventDefault();
        });