luke-codewalker / swipe

Exploration of Tinder's swipe interaction design

Home Page:https://luke-codewalker.github.io/swipe/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Swipe!

This little website is an exploration of the interaction design of Tinder. In this dating app you can famously swipe the picture of a person to the right if you like them or the left if you don't. The way the picture moved intrigued me ever since I first tried it out.

The swipe movement is a combination of the picture moving with the pointer along the x- and y-axis and rotating depending on the amount of movement along the x-axis. The direction of rotation depends on wether you started swiping in the upper or lower half of the picture. This keeps enough of the picture underneath the cursor so you don't loose touch while simultaneously revealing the next picture.

You can find the website here. For issues and comments please use this repo.

About

Exploration of Tinder's swipe interaction design

https://luke-codewalker.github.io/swipe/

License:MIT License


Languages

Language:HTML 37.2%Language:CSS 35.3%Language:JavaScript 27.5%