Pete R.

Smooth Mobile Swipe Animation

  • Save
Smooth Mobile Swipe Animation travelistly js css3 mobile ui web card swipe animation

It took me a whole day to finally get the swipe gesture smooth on the web (desktop and mobile) using jQuery and CSS3. I wrote the script from scratch to calculate the drag point and make sure that it passes the threshold, before animating the card with CSS3 in sequence. It's harder than it looks when it comes to replicating animation in a browser compare to a native app.

You can see it live here: http://www.travelistly.com/
Make sure you visit the page on mobile and select any story on the list and start swiping,

Let me know what you think!

keyboard shortcuts: L or F like