iOS Library: The Tinder Animation

Posted on

I’ve been thinking of making an app using the Tinder-like animation. After searching around for a good open source library for this, I ended up disappointed – there were libraries, but they just weren’t that great.

Finally, a few days ago, a new library came out called MDCSwipeToChoose, which gets the animation just right!

tinder like animation

Notice how when you move a card, the bottom one moves up slightly. Now that’s some attention to detail!

The library is really easy to install – via Cocoapods, is very easy to use, and is very customizable. Maybe I will use it for my app!

The only thing I was wondering is whether there is a better way to do this animation using UICollectionView and playing with UIKitDynamics in an UICollectionFlowLayout subclass…

Enjoy the article? Join over 17,500+ Swift developers and enthusiasts who get my weekly updates.

  • Hey, I made that library! Thanks for writing about it.

    I agree re: UICollectionView. What’s nice about MDCSwipeToChoose is that it’s a category which can be used with any instance of UIView; it’s not tied to the concept of a stack of cards. But there might be a better implementation if you assume the user is working with a collection. Or maybe you can contribute a wrapper API to MDCSwipeToChoose itself!

    UIKit Dynamics is definitely something to consider as well. Looking at Tinder.app, there are three main animations:

    1. The card rotates slightly while being panned.
    2 & 3. When released, it either and snaps back into place or flies off the screen.

    Dynamics might make the “fly off the screen” animation more natural; I’ll have to look into it. Thanks!

    • I finally have some time this weekend put aside to play with the UICollectionView / UIKitDynamics implementation of this. Not sure if I’ll be successful, but will try! All the use-cases I can think of require working with a collection, so that’s why I’d like to implement it that way.

      • Yeah, I’ve been getting a lot of questions on how to use the library to mimic Tinder *exactly*, which made me wonder about collection views as well.

        I took a stab at it this morning, and one thing I realized is that if you call -mdc_swipeToChooseSetup: on a UICollectionViewCell, you’re able to swipe that cell away, but the cell itself is contained within the bounds of the collection view. That is, when you swipe a cell to the right, it’s only visible within the bounds of the collection view. Here’s a screenshot to demonstrate: http://cl.ly/image/1q1a3t1t320U/iOS%20Simulator%20Screen%20shot%20May%2016,%202014,%2012.16.54%20AM.png

        So if you want your Tinder clone to be able to swipe a collection view cell “off the screen”, you’ll need to make your collection view as big as the screen bounds.

        Between that and creating a custom “stacked cards” UICollectionViewLayout, I found the whole thing to be more trouble than it was worth. But I’m hoping you have better luck, and if you do, please write about it!

    • Mithun

      This is a really interesting library, how are you getting the “Liked” and “Nope” to fade in on the image?

      • Mithun

        found it! I guess it’s just part of the MDC library

  • Tiafau Purcell

    I’m learning iOS right now and also want to build a similar app using “Tinder-like” swipe feature. Could you walk me through how you got the project to work in XCode?

  • Anil

    Can i use it to swipe up and swipe down to do the like and unlike anyhow ?

  • Anyone knows a good Swift alternative for this?

    • Rob Swift

      The repo above is also written in Swift.