{"id":260,"date":"2014-10-19T08:00:00","date_gmt":"2014-10-19T08:00:00","guid":{"rendered":"http:\/\/localhost\/?p=260"},"modified":"2015-12-16T19:49:27","modified_gmt":"2015-12-16T19:49:27","slug":"tinder-for-x","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/tinder-for-x","title":{"rendered":"Tinder for X with Ionic"},"content":{"rendered":"<p>When we released the <a href=\"http:\/\/github.com\/driftyco\/ionic-contrib-swipe-cards\">Swipe Cards<\/a> ion (our term for Ionic add-ons\/widgets), Tinder wasn&#8217;t really on our radar. At the time, we were impressed by some of the unique UX elements in the app <a href=\"http:\/\/jelly.co\/\">Jellyfish<\/a> and wanted to prove they could be built just as well in Ionic and with the power of HTML5.<\/p>\n<p>However, the #1 request we&#8217;ve had since the release was support for Tinder-style swipe cards. While we can&#8217;t say whether or not we have any experience with Tinder, we do love the way Tinder makes it easy to process a large list of items, indicating a positive or negative reaction.<\/p>\n<p>It&#8217;s amazing how broadly applicable the swipe card interface is, and this &#8220;Tinder for X&#8221; phenomenon was something we wanted to help Ionic developers jump on.<\/p>\n<p><!--more--><\/p>\n<p>Today we are happy to release the Ionic Tinder-style Cards ion. This ion has support for swiping cards left and right, and also animating the stack of cards underneath<br \/>\nthe current card. Try it out below!<\/p>\n<div style=\"margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 70px; width: 320px\">\n<p data-height=\"568\" data-width=\"320\" data-theme-id=\"3572\" data-slug-hash=\"nxEdH\" data-default-tab=\"result\" data-user=\"ionic\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/ionic\/pen\/nxEdH\/\">Ionic Ion: Tinder Cards<\/a> by Ionic (<a href=\"http:\/\/codepen.io\/ionic\">@ionic<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p>  <script async=\"\" src=\"\/\/codepen.io\/assets\/embed\/ei.js\"><\/script>\n<\/div>\n<p>This also marks the first usage of our <a href=\"https:\/\/github.com\/driftyco\/collide\">collide<\/a> animation library for support for physics-style animations like springs and gravity. Notice how if you drag too little and let go, the cards spring back into place!<\/p>\n<h3 id=\"gettingstarted\">Getting started<\/h3>\n<p>To get started, use bower to add the ion to your project:<\/p>\n<pre><code class=\"bash\">$ bower install ionic-contrib-tinder-cards\n<\/code><\/pre>\n<p>Take a look at the demo for a full example of how to use this ion: <a href=\"https:\/\/github.com\/driftyco\/ionic-contrib-tinder-cards\/tree\/master\/demo\">https:\/\/github.com\/driftyco\/ionic-contrib-tinder-cards\/tree\/master\/demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When we released the Swipe Cards ion (our term for Ionic add-ons\/widgets), Tinder wasn&#8217;t really on our radar. At the time, we were impressed by some of the unique UX elements in the app Jellyfish and wanted to prove they could be built just as well in Ionic and with the power of HTML5. However, [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3],"class_list":["post-260","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tinder for X with Ionic - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/tinder-for-x\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tinder for X with Ionic\" \/>\n<meta property=\"og:description\" content=\"When we released the Swipe Cards ion (our term for Ionic add-ons\/widgets), Tinder wasn&#8217;t really on our radar. At the time, we were impressed by some of the unique UX elements in the app Jellyfish and wanted to prove they could be built just as well in Ionic and with the power of HTML5. However, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/tinder-for-x\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-10-19T08:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-12-16T19:49:27+00:00\" \/>\n<meta name=\"author\" content=\"Max Lynch\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@maxlynch\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Max Lynch\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/tinder-for-x#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/tinder-for-x\"},\"author\":{\"name\":\"Max Lynch\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e\"},\"headline\":\"Tinder for X with Ionic\",\"datePublished\":\"2014-10-19T08:00:00+00:00\",\"dateModified\":\"2015-12-16T19:49:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/tinder-for-x\"},\"wordCount\":261,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"keywords\":[\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/tinder-for-x#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/tinder-for-x\",\"url\":\"https:\/\/ionic.io\/blog\/tinder-for-x\",\"name\":\"Tinder for X with Ionic - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"datePublished\":\"2014-10-19T08:00:00+00:00\",\"dateModified\":\"2015-12-16T19:49:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/tinder-for-x#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/tinder-for-x\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/tinder-for-x#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tinder for X with Ionic\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e\",\"name\":\"Max Lynch\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg\",\"caption\":\"Max Lynch\"},\"description\":\"CEO\",\"sameAs\":[\"http:\/\/twitter.com\/maxlynch\",\"https:\/\/x.com\/maxlynch\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/max\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Tinder for X with Ionic - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/tinder-for-x","og_locale":"en_US","og_type":"article","og_title":"Tinder for X with Ionic","og_description":"When we released the Swipe Cards ion (our term for Ionic add-ons\/widgets), Tinder wasn&#8217;t really on our radar. At the time, we were impressed by some of the unique UX elements in the app Jellyfish and wanted to prove they could be built just as well in Ionic and with the power of HTML5. However, [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/tinder-for-x","og_site_name":"Ionic Blog","article_published_time":"2014-10-19T08:00:00+00:00","article_modified_time":"2015-12-16T19:49:27+00:00","author":"Max Lynch","twitter_card":"summary_large_image","twitter_creator":"@maxlynch","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Max Lynch","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/tinder-for-x#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/tinder-for-x"},"author":{"name":"Max Lynch","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e"},"headline":"Tinder for X with Ionic","datePublished":"2014-10-19T08:00:00+00:00","dateModified":"2015-12-16T19:49:27+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/tinder-for-x"},"wordCount":261,"commentCount":4,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"keywords":["Ionic"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/tinder-for-x#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/tinder-for-x","url":"https:\/\/ionic.io\/blog\/tinder-for-x","name":"Tinder for X with Ionic - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"datePublished":"2014-10-19T08:00:00+00:00","dateModified":"2015-12-16T19:49:27+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/tinder-for-x#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/tinder-for-x"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/tinder-for-x#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Tinder for X with Ionic"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e","name":"Max Lynch","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg","caption":"Max Lynch"},"description":"CEO","sameAs":["http:\/\/twitter.com\/maxlynch","https:\/\/x.com\/maxlynch"],"url":"https:\/\/ionic.io\/blog\/author\/max"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=260"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/260\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}