The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

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

  • http://ohc-health.com/ Lars Andersson

    Thank you for this info Love this cards http://theforceoftheuniverse.com/

  • Anand Gurnani

    Hello, I am a complete Novice. However I have downloaded Ionic and followed some tutorials. I downloded all the files from git hub, i even sourced this code from codepen and I included all the html code in index.html (inside www), I copied the javascript into app.js and I copied the css into the style.css . I installed the ion via bower. Yet, when I call for the index page to be served, all I see is the title and the like dislike (yay, nope) but no images. I copied the images into the image library, I tried giving full url of images inside the js file, but nothing is working. 🙁

    • Anand Gurnani

      Ok I have subscribed to thinkster for their tutorials and some things are beginnning to work

  • Chechs

    Does it have a function that I can call instead of swiping? Foe example, to provide an alternative way for swiping like Tinder ‘cross’ and ‘heart’ buttons that are respectively used to swipe left and right.