Making Tinder-Style Swipe Cards With Ionic Framework

The Tinder App recently got a lot of attention, especially the swipe cards are suddenly appearing everywhere. Ionic is already creating a solution for everyone to easily create these kind of cards with HTML5 and Javascript. Therefore, in this tutorial I will show you how to add Tinder-style swipe cards in your Ionic app with the help of a custom ion.

You can find the current project for ionic-ion-tinder-cards on github. However, the demo is a bit buggy and the documentation by now is not very detailed, so follow along this tutorial to get a sweet card optic like this:

Ionic Tinder Cards

Setup your base App

We start with a simple blank Ionic template and add the iOS and Android Platform:

Now we need to install the the Ionic tinder cards, in general I prefer it to install these packages via bower so go ahead and type:

This will not only install the Ionic tdcards, but also the collide.js lib which is used inside the tinder cards. We need to import both in our app, therefore open your index.html and add the two highlighted lines:

 

Adding the tinder cards

To show anything, we need to edit our index.html and include the custom directives. Replace everything inside the body with:

We add cards for items in our scope array, and additional we set some events for the actions the cards receive. They are quite self explaining, I must mention that some events don’t get completely correct triggered by now. I think we will see an update on these parts in the near future.

Inside the card we have some div elements, but we will come to the styling later in this tutorial. The important part here is to have at least the yes-text and no-text class, as they are targeted inside the tinder cards library. If you don’t use them, you will see a lot of JavaScript errors in your console!

Furthermore we add the ‘no-scroll’ directive to our body, so you don’t scroll the content itself but only the cards. We define this in our app.js and also inject the dependency to the tinderCards:

Now only the controller we assigned to our content is missing. So go ahead and add this to your app.js:

Nothing special in here. We define our array with cardtypes (you can find the images in the related github repo) and add the three cards to our scope array for the ng-repeat we defined in the index. The other functions are the ones we assigned to our swipe events. For me, the cardDestroyed seems to work always while the other two only get called when you really swipe the card out fast.

The official Ionic demo also adds a new card whenever one was destroyed/swiped out, but that results in strange UI behavior for me. As I said before, there will be definitely updates in the future.

 

Add some custom styling

Last thing missing is now some CSS. If you run your app by now, the appearance won’t be close to what you saw at the beginning of this post. Maybe more elements of the style will be included in next releases, for now add this to your app.css:

In general, we have two parts here: The styling and position of the card component, and the styling for a slight overlay when you start dragging the cards. You can play around with all elements to fit your needs, for me this was somehow an acceptable result. Now go ahead an run your app, and you should have three cool styled tinder cards! Did you notice the small effect on the card stack when you drag the first card? Yes, Ionic has an eye for details.

If you want to see the tinder cards in action, you can have a look at my deployment on Heroku or deploy it directly to your Heroku:

Deploy


 

Conclusion

This tutorial explained how to make Tinder style cards with Ionic, with just some directives and custom styling. However, there are still some points which needs to be fixed. The swiping is not always triggered correctly, and a button to programmatically pop the top card was not working by now. This would be a feature you most certainly always want to have when using cards like these.

If you like this tutorial or have any questions feel free to comment, follow me on twitter @schlimmson or have a look at my Blog Devdactic to see more tutorials about Ionic and other fancy frameworks!

saimon

Application Developer and Process Optimization at arvato Bertelsmann, Germany| Passioned about Apps and Modern Frameworks | Objective-C, Ionic Framework, AngularJS, Java, Python and Javascript | Blogging about Mobile Development and Modern Frameworks on www.devdactic.com

  • Barry Mc Gettigan

    Great tutorial. Thanks a lot!!

  • Jon Hines

    Do you have any examples of cards pulling from live data? I realize we would be doing http requests. Guess the question is what are some of those sites that have an api that we can pull from to display in our cards. btw great post!

    • If you mean pulling real data, you could go for the obvious ones like Google, Facebook Twitter and so on. If you just want to test some REST Api with the cards, you could have a look at https://randomuser.me/, which will give you some random data. Is that what you mean?

      • Jon Hines

        yeh, that’s it, ty! but also the line of Dribbble as well.

  • Jon Hines

    Hey Simon, need some help on going about showing the save batch of cards then refreshing it to show the saved pile. Don’t expect you to write the code, but can you point me to some references on that. Cheers!

    • Can you explain further what you’re trying to do?

      • Jon Hines

        You know when you swipe the cards either to save or trash it. Well I’d like to be able to refresh my page to show the cards that went to my saved pile.

        • Elham Sarikhani

          I want to do the same thing. have you find the solution?

  • Naveen Karippai

    Hi, Can you please show the basic steps in setting up swipeable cards on Ionic as well? I’m not able to implement the pop-in CSS animation to swipe cards and also it works more similar to Tinder cards with drag-to left/right than drag-down.

    Thanks in advance.

    • I will try to come up with a solution!

      • Naveen Karippai

        Thank you 🙂 I’m looking forward.

  • Cavan Flynn

    I’ve been trying to implement this with a tabbed layout, but it seems to either break or get rid of the tabs. Any tips on doing this? Thanks!

    • In general this should work. Could you share some code? Maybe the tags are a bit messed up or there is just a small problem!

      • Cavan Flynn

        Thanks for your quick response! I was able to get it working by adding the tabs after I had set up the tinder cards instead of using the template when first starting the project.

    • Bob

      I had the same problem. In the end it was a single semicolon in the controllers.js that needed to be removed. It seems that there must not be any semicolons between the controllers; only one at the end of them.

  • Scott Garza

    Thats good post. I have used Tinder app for dating and felt good with the features involved in it. I was impressed with the main feature like location of the user and his interests, an algorithm will show the best matches in a Hot or Not style.

    These information have made to use the app in an advanced way.

    Tinder Like Apps

  • starkipraggy

    I can’t get the animations to work. The drag actions fire, but for some reason the card doesn’t animate itself dragging.

  • Avinash Kesari

    Great Tutorial. Thanks a lot!!
    I have a problem, when adding more than 3 cards it becomes buggy and sluggish. the cars start moving heigh-we. I used 8 card in my application.

  • Derrick Njenga

    Is there a way to reverse the order in which the cards are loaded (i.e probably last card to the first card) ?

    • Elham Sarikhani

      $scope.cards.unshift(angular.extend({}, newCard));

  • Deepak Aggarwal

    You need to really apply forced and fast swipe to make ionic swipe-* actions to work. Is there a way to make it smoother?

  • Elham Sarikhani

    Is there a way to reload the cards that haven’t been removed?

  • Tomas Baena

    Amazing as always thank you!

  • Jeamar

    Hi, So I created 2 buttons under the Tinder x cards. I want when click the Nope button, card will slide left without user drag left, same as Like button with card slide right. What function I need to call in the ng-click on my button to achieve that?
    Thanks

  • The Deploy to Heroku doesn’t work. Is it supposed to work? I’m just wondering because it’d be a good way to test to save resources on my local machine.

  • David Luque

    C:Users…ionic-tinderstyle>bower install –save ionic-contrib-tinder-cards
    bower invalid-meta The “name” is recommended to be lowercase, can contain digits, dots, dashes
    bower ionic#1.3.1 ENOGIT git is not installed or not in the PATH

    Can you help me? what can i do? Thanks!