October 19, 2014
  • All
  • Ionic

Tinder for X with Ionic

Max Lynch


When we released the Swipe Cards ion (our term for Ionic add-ons/widgets), Tinder wasn’t really on our radar. At the time, we were impressed by some of the unique UX elements in the app Jellyfish and wanted to prove they could be built just as well in Ionic and with the power of HTML5.

However, the #1 request we’ve had since the release was support for Tinder-style swipe cards. While we can’t say whether or not we have any experience with Tinder, we do love the way Tinder makes it easy to process a large list of items, indicating a positive or negative reaction.

It’s amazing how broadly applicable the swipe card interface is, and this “Tinder for X” phenomenon was something we wanted to help Ionic developers jump on.

Today we are happy to release the Ionic Tinder-style Cards ion. This ion has support for swiping cards left and right, and also animating the stack of cards underneath
the current card. Try it out below!

See the Pen Ionic Ion: Tinder Cards by Ionic (@ionic) on CodePen.

This also marks the first usage of our collide animation library for support for physics-style animations like springs and gravity. Notice how if you drag too little and let go, the cards spring back into place!

Getting started

To get started, use bower to add the ion to your project:

$ bower install ionic-contrib-tinder-cards

Take a look at the demo for a full example of how to use this ion: https://github.com/driftyco/ionic-contrib-tinder-cards/tree/master/demo

Max Lynch