Tinder Animation (GSAP)

index.html

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/utils/Draggable.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>

<div class="phone">

	<div class="app">

			<div class="header">

				<span class="settings"></span>

				<img src="http://web.arjentienkamp.com/codepen/tinder/logo.jpg"/>

				<span class="chat"></span>

			</div>

			<div class="content">

			</div>	

			<div class="footer">
				<div id="swipe_dislike" class="rate"></div>

				<div class="info"></div>

				<div id="swipe_like" class="rate"></div>
			</div>

	</div>	

</div>

script.js

$(document).ready(function(event) {
	
	$("div#swipe_like").on( "click", function() {
		swipeLike();
	});	

	$("div#swipe_dislike").on( "click", function() {
		swipeDislike();
	});	

	addNewProfile();

	function swipe() {
		Draggable.create("#photo", {
		   	throwProps:true,
		   	onDragEnd:function(endX) {
	   			if(Math.round(this.endX) > 0 ) {
	   				swipeLike();			
	   			}
	   			else {
	   				swipeDislike();
	   			}
	   			console.log(Math.round(this.endX));
			}
		});
	}

	function swipeLike() {
		
			var $photo = $("div.content").find('#photo');

			var swipe = new TimelineMax({repeat:0, yoyo:false, repeatDelay:0, onComplete:remove, onCompleteParams:[$photo]});
			swipe.staggerTo($photo, 0.8, {bezier:[{left:"+=400", top:"+=300", rotation:"60"}], ease:Power1.easeInOut});

			addNewProfile();
	}

	function swipeDislike() {
		
			var $photo = $("div.content").find('#photo');

			var swipe = new TimelineMax({repeat:0, yoyo:false, repeatDelay:0, onComplete:remove, onCompleteParams:[$photo]});
			swipe.staggerTo($photo, 0.8, {bezier:[{left:"+=-350", top:"+=300", rotation:"-60"}], ease:Power1.easeInOut});

			addNewProfile();
	}

	function remove(photo) {
	    $(photo).remove();
	}

	function addNewProfile() {
		var names = ['Lieke', 'Christina', 'Sanne', 'Soraya', 'Chanella', 'Larissa', 'Michelle'][Math.floor(Math.random() * 7)];
		var ages = ['19','22','18','27','21', '18', '24'][Math.floor(Math.random() * 7)]
		var photos = ['1', '2', '3', '4', '5', '6', '7'][Math.floor(Math.random() * 7)]
		$("div.content").prepend('<div class="photo" id="photo" style="background-image:url(http://web.arjentienkamp.com/codepen/tinder/photo'+photos+'.jpg)">'
    	+ '<span class="meta">' 
    	+ '<p>'+names+', '+ages+'</p>' 
    	+ '<span class="moments">0</span>' 
    	+ '<span class="users">0</span>' 
    	+ '</span>' 
    	+ '</div>');

    	swipe();
	}

});

style.css

.phone {
	width: 350px;
	height: 600px;
	font-family: 'Noto Sans', sans-serif;
	background: url(http://web.arjentienkamp.com/codepen/tinder/iphone.png);
	background-size: 382px;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4em;
	padding-top: 7em;
	padding-left: 3.2em;
	padding-right: 3.7em;
}

.app {
	width: 285px;
	height: 490px;
	background-color: #FFF;
	padding-top: 12px;
}

.content {
	padding: 10px;
	padding-top: 0px;
}

.header {
	background-color: #FFF;
	width:100%;
	height:40px;
	border-bottom: 1px solid #e2e2e2;
	text-align: center;
	margin-bottom: 10px;
}

.header img {
	width:70px;
}

div.photo {
	position:absolute;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width:265px;
	height:315px;
	border:1px solid #a6a9aa;
	border-radius: 8px;
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: 0px 1px 7px 0px #cfcfcf;
}

span.meta {
	display: block;
	height:48px;
	background-color: #FFF;
	margin-top: 267px;
	border-radius: 0px 0px 8px 8px;
	font-size: 18px;
	box-sizing:border-box;
	padding: 12px;
}

span.meta span {
	float: right;
	color:#cfcfcf;
}

.users {
	display: block;
	width: 20px;
	background: url(http://web.arjentienkamp.com/codepen/tinder/users.png);
	background-size: 20px;
	background-repeat: no-repeat;
	padding-left: 30px;
	background-position: 5px;
}

.moments {
	display: block;
	width: 14px;
	background: url(http://web.arjentienkamp.com/codepen/tinder/moments.png);
	background-size: 26px;
	background-repeat: no-repeat;
	padding-left: 35px;
	background-position: 5px;
}

.chat {
	display: block;
	width: 34px;
	height: 30px;
	background: url(http://web.arjentienkamp.com/codepen/tinder/chat.png);
	background-size: 30px;
	background-repeat: no-repeat;
	padding-left: 4px;
	background-position: 5px;
	float: right;
	margin-top: 0px;
}

.settings {
	display: block;
	width: 34px;
	height: 30px;
	background: url(http://web.arjentienkamp.com/codepen/tinder/settings.png);
	background-size: 30px;
	background-repeat: no-repeat;
	padding-left: 4px;
	background-position: 5px;
	float: left;
	margin-top: 0px;
}

.footer {
	margin-left: auto;
	margin-right: auto;
	margin-top: 318px;
	width: 100%;
	padding-left: 40px;
	padding-top: 6px;
}

.rate {
	width: 70px;
	height:70px;
	border-radius: 70px;
	background: #FFF;
	border: 5px solid #f0f0f0;
	float: left;
	box-shadow: 1px 1px 1px 0px #e9e9e9;
}

.rate:nth-child(1) {
	margin-left: 4px;
	background: url(http://web.arjentienkamp.com/codepen/tinder/delete.png);
	background-size: 25px;
	background-position: center;
	background-repeat: no-repeat;
}


.rate:nth-child(3) {
	margin-left: -4px;
	background: url(http://web.arjentienkamp.com/codepen/tinder/heart.png);
	background-size: 25px;
	background-position: center;
	background-repeat: no-repeat;
}

.info {
	width: 40px;
	height: 40px;
	border-radius: 40px;
	background: #FFF;
	border: 5px solid #f0f0f0;
	float: left;
	box-shadow: 1px 1px 1px 0px #e9e9e9;
	margin-top: 14px;
	margin-left: -4px;

	background: url(http://web.arjentienkamp.com/codepen/tinder/info.png);
	background-size: 15px;
	background-position: center;
	background-repeat: no-repeat;
}

p {
	padding:0;
	margin:0;
	float: left;
}

Tinder Animation (GSAP).markdown

Tinder Animation (GSAP)

Tinder's swiping and like/dislike animation (buttons work as well as swiping 'drag and drop'). Made with GSAP.

A Pen by Bright Sparks on CodePen.

License.