# New Ion: Tinder Swipe Cards

**URL:** <https://forum.ionicframework.com/t/new-ion-tinder-swipe-cards/12161>\
**Category:** ionic-v1\
**Created:** [November 4, 2014, 5:39pm UTC](https://forum.ionicframework.com/t/new-ion-tinder-swipe-cards/12161 "2014-11-04T17:39:29Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![max](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/max/32/137761_2.png) [@max](https://forum.ionicframework.com/u/max)\
**Post date:** [November 4, 2014, 5:39pm UTC](https://forum.ionicframework.com/t/new-ion-tinder-swipe-cards/12161/1 "2014-11-04T17:39:29Z")

</div>

Hey everyone,

In case you missed it, we released a new “ion” (which is our terminology for add on widgets for Ionic) that lets you add the unique swipe left/right UI from the Tinder app: [https://github.com/driftyco/ionic-contrib-tinder-cards](https://github.com/driftyco/ionic-contrib-tinder-cards)

Check it out and let us know what you think. To install from bower run:

`bower install ionic-contrib-tinder-cards`

And check out the live demo: [http://codepen.io/ionic/pen/nxEdH](http://codepen.io/ionic/pen/nxEdH)

Hope you enjoy it!

---

<div class="post-metadata">

**Author:** ![max](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/max/32/137761_2.png) [@max](https://forum.ionicframework.com/u/max)\
**Post date:** [November 4, 2014, 5:39pm UTC](https://forum.ionicframework.com/t/new-ion-tinder-swipe-cards/12161/2 "2014-11-04T17:39:41Z")

</div>



---

<div class="post-metadata">

**Author:** ![max](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/max/32/137761_2.png) [@max](https://forum.ionicframework.com/u/max)\
**Post date:** [November 6, 2014, 2:42am UTC](https://forum.ionicframework.com/t/new-ion-tinder-swipe-cards/12161/3 "2014-11-06T02:42:39Z")

</div>



---

<div class="post-metadata">

**Author:** ![max](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/max/32/137761_2.png) [@max](https://forum.ionicframework.com/u/max)\
**Post date:** [November 6, 2014, 2:42am UTC](https://forum.ionicframework.com/t/new-ion-tinder-swipe-cards/12161/4 "2014-11-06T02:42:41Z")

</div>



---

<div class="post-metadata">

**Author:** ![max](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/max/32/137761_2.png) [@max](https://forum.ionicframework.com/u/max)\
**Post date:** [November 6, 2014, 2:58am UTC](https://forum.ionicframework.com/t/new-ion-tinder-swipe-cards/12161/5 "2014-11-06T02:58:35Z")

</div>



---

<div class="post-metadata">

**Author:** ![iqlas](https://avatars.discourse-cdn.com/v4/letter/i/b38774/32.png) [@iqlas](https://forum.ionicframework.com/u/iqlas)\
**Post date:** [December 18, 2014, 12:54pm UTC](https://forum.ionicframework.com/t/new-ion-tinder-swipe-cards/12161/6 "2014-12-18T12:54:56Z")

</div>

It is great widget and I started using it. Thank you very much for this.

I wanted to add a heart/cross button so that I can trigger the “swipe” action manually. However, I could not find a way to trigger the swipping (left and right) programatically from both controller. Can you help me to figure out this.

---

<div class="post-metadata">

**Author:** ![Sat](https://avatars.discourse-cdn.com/v4/letter/s/22d042/32.png) [@Sat](https://forum.ionicframework.com/u/Sat)\
**Post date:** [January 12, 2015, 10:03pm UTC](https://forum.ionicframework.com/t/new-ion-tinder-swipe-cards/12161/7 "2015-01-12T22:03:55Z")

</div>

Hi @max, I am facing the same issue @iqlas has mentioned, with [http://ionicframework.com/demos/swipe-cards/](http://ionicframework.com/demos/swipe-cards/), we do have the triggering of Card Pop event, I tried to use

```auto
/**
         * Swipe a card out programtically
         */
        swipe: function() {
            this.transitionOut();
        },

```

But as it’s not passing the gesture event as param in `this.transitionOut()` , this function is throwing error.

---

<div class="post-metadata">

**Author:** ![iqlas](https://avatars.discourse-cdn.com/v4/letter/i/b38774/32.png) [@iqlas](https://forum.ionicframework.com/u/iqlas)\
**Post date:** [January 13, 2015, 8:17pm UTC](https://forum.ionicframework.com/t/new-ion-tinder-swipe-cards/12161/8 "2015-01-13T20:17:19Z")

</div>

I could n’t make it work…then I started using tinder style card and it look much better in terms of usability.

---

<div class="post-metadata">

**Author:** ![Hughred22](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hughred22/32/74088_2.png) [@Hughred22](https://forum.ionicframework.com/u/Hughred22)\
**Post date:** [May 4, 2015, 5:05pm UTC](https://forum.ionicframework.com/t/new-ion-tinder-swipe-cards/12161/9 "2015-05-04T17:05:45Z")

</div>

I am also facing the issue @iqlas has and will love an example solution of how to programmactially trigger the swiping gesture. Thanks!