Making Tinder Style Swipe Cards With Ionic Framework

The Tinder App recently got a complete great deal of attention, particularly the swipe cards are unexpectedly showing up every-where. Ionic is producing a remedy for all to create these kind easily of cards with HTML5 and Javascript. Consequently, in this guide we will highlight how exactly to add Tinder-style swipe cards in your Ionic application with the aid of a customized ion.

There is the present task for ionic-ion-tinder-cards on github. Nevertheless, the demo is really a bit buggy as well as the documents at this point is certainly not extremely step-by-step, so follow along this tutorial to have a card that is sweet similar to this:

Setup your base App

We focus on a simple blank Ionic template and include the iOS and Android os system:

Now we have to install the the Ionic tinder cards, as a whole i favor it to put in these packages via bower therefore go right ahead and kind:

This can not just install the Ionic tdcards, but additionally the collide.js lib that is utilized within the tinder cards. We have to import both within our software, therefore available your index.html and include the lines:

Incorporating the tinder cards

To exhibit such a thing, we have to modify our index.html and can include the customized directives. Substitute every thing in the human body with:

We add cards for products inside our scope array, and additional some events are set by us when it comes to actions the cards get. They’ve been quite self explaining, i need to point out that some occasions don’t get totally proper set off by now. I believe we will have an improvement on these components when you look at the not too distant future.

Within the card we’ve some div elements, but we will arrived at the styling later on in this guide. The crucial component right here is to possess at least the yes-text and no-text course, since they are targeted in the tinder cards collection. Them, you will see a lot of JavaScript errors in your console if you don’t use!

Also the‘no-scroll is added by us’ directive to your body, which means you don’t scroll this content it self but just the cards. We determine this within our app.js and also inject the dependency towards the tinderCards:

Now just the controller we assigned to the content is lacking. Therefore go on and include this to your app.js:

absolutely Nothing unique in here. We define our array with cardtypes (you will find the pictures into the relevant github repo) and include the 3 cards to your range array for the ng-repeat we defined when you look at the index. One other functions will be the people we assigned to the swipe activities. You really swipe the card out fast for me, the cardDestroyed seems to work always while the other two only get called when.

The state Ionic demo additionally adds a card that is new one ended up being destroyed/swiped down, but that results in strange UI behavior for me personally. When I stated before, you will see surely updates later on.

Include some customized styling

Very last thing lacking is currently some CSS. You saw at the beginning of this post if you run your app by now, the appearance won’t be close to what. Maybe more components of the design is supposed to be a part of next releases, for now include this to your app.css:

As a whole, we now have two components right right here: The styling and place of this card component, additionally the styling for the overlay that is slight you begin dragging the cards. It is possible to mess around along with elements to suit your requirements, for me personally this is somehow a appropriate outcome. Now get ahead an run your application, and you ought to have three cool styled tinder cards! Did you notice the little impact on the card stack whenever you drag the card that is first? Yes, Ionic posseses an optical attention for details.

If you wish to begin to see the tinder cards for action, it’s possible to have a glance at my implementation on Heroku or deploy it right to your Heroku.


This guide explained making Tinder design cards with Ionic, with only some directives and customized styling. Nonetheless, there are some true points which should be fixed. The swiping just isn’t constantly triggered properly, and a switch to programmatically pop the most truly effective card had not been working at this point. This will be an attribute you definitely constantly wish to have whenever cards that are using these.

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

Leave a Reply

Your email address will not be published. Required fields are marked *