Ionic Tinder Cards 2

Demo GitHub

Based on some of the reading I've been doing, it seems that some people flipped out when Jelly made the "card swipe" which led instantly to several recreations in native apps. The Ionic team caught wind and built their own versions with what else...Ionic, and developed Swipe Cards. Then, Tinder came out with their own version and the Ionic Team developed Tinder Cards. I like both modules.

It's not so much that there's any particular novelty in the concept because Javascript developers have been able to develop similar things for years, it's just that there's now an actual reason to use them. To use Swipe Cards in web apps would just be clunky, but on a mobile app, it's cool and practical. And this is why I like these modules.

If you'd like to see the repo on Github, feel free to check out the link below and if you're still confused Nic Raboy wrote a tutorial on how to implement them. That's important because I have no intention of repeating what they said or giving a walkthrough on how to implement the cards.

Tinder Cards on GitHub Nic Raboy's Tutorial

After discovering the Tinder Cards repo by the Ionic Team, I decided that I liked them so much that I wanted to tweak them and make them my own. And as a result, I created Tinder Cards 2 which is based heavily on the original and is the name of the codepen at the top of this blog post. The README.md should suffice as an explanation of how to get the cards going yourself and instead of using the rest of this blog post to explain how it works, I'd like to take the opportunity to discuss a few things I discovered while disecting the original Tinder Cards repo and which were interesting and perhaps essential in creating my own modification: 1) inherit() and 2) collide.js.


1) .inherit()

There's a built in .inherit() method, "inherited" from Backbone.js, which allows greater ease in generating subclasses with a specific prototype chain. It actually operates similarly to the way Backbone organizes Views in that there is an initialize method and defined properties that are tacked onto the prototype and thus inherited whenever you create a new object using a constructor ('new' keyword).

var SwipeableCardView = ionic.views.View.inherit({

    // Invoked when card is initialized
    initialize: function(opts) {
      opts = ionic.extend({
      }, opts);
      ionic.extend(this, opts);
    },

    // Prototype property
    doSomething: function() {
        // do something
    },

    // Prototype property
    domeSomethingElse: function() {
        // do something else
    }

});

var swipeableCardView = new SwipeableCardView({  
    // el: element[0],
    // other stuff
});

There's a post on the official Ionic Blog post that provides an in depth description of how the original Swipe Cards directive was created using this model. The author, Max, does a great job of explaining Views and View Controllers, a concept rooted in native mobile development and which plays nicely with angular directives, and of describing how to use ionic.views.View.inherit correctly. It most certaintly deserves an indepth read.

Ionic Blog - Swipe Cards

2) collide.js

The second interesting discovery from perusing the Tinder Cards repo is the collide.js animation engine. It's a library created by the Ionic Team and written in Javascript to give hybrid mobile devs greater control over CSS animations and it exposes methods to specifiy events at the start, during (on every step), and end of the animation. It was inspired by Facebook Pop, written in Objective C, and kind of smells like a lightweight version of Famous.

I've played with it and written a few modules with collide.js... and I like it. The only problem is that the repo is no longer being actively contributed to by the Ionic Team (last code commit 10 months ago) but it works well for where it currently stands. It could use a greater array of easing options which currently stands at only spring and gravity, but it's ripe for the developing of anybody looking to make an open source contribution.

Below is an example of how one might implement collide.js to translate an element
400 pixels to the right. We can specify duration, easing (in this case...a nice spring bounce), and what the element should do on every step of the animation.

    var animation = collide.animation({
      duration: 500,
      percent: 0,
      reverse: false
    })

    .easing({
      type: 'spring',
      frequency: 15,
      friction: 250,
      initialForce: false
    })

    .on('step', function(v) {
      el.style.transform = el.style.webkitTransform = 'translate3d(' + (400*v) + ', 0, 0)';
    })
    .start();

If that's too simple for what you're trying to accomplish, there's plenty more you can do. The docs are a little lacking but it shouldn't take much to construct a more complex animation based on the code snippet above.

collide.js on GitHub

In conclusion, it's fun discovering new stuff.