<div class="cart" style="font-size: 30px; color: #ff9a9e"><i class="fas fa-shopping-cart"></i>
</div>

<div class="product-wrapper">
	<div class="product">
		<div class="product__add-to-cart-button"> Add to Cart</div>
	</div>
</div>

.cart{
	position: absolute;
	right: 50px;
	top: 50px;
	width: 30px;
	cursor: pointer;
}

/* Needed for animation later */
$product-width: 200px;
$product-height: 250px;

.product{
	position: relative;
	height: 100%;
	width: 100%;
	
	&-wrapper{
		position: relative;
		height: $product-height;
		width: $product-width;
		background: rgba(#ff9a9e, 0.4);
		margin: calc(50vh - #{$product-height/2}) auto 0;
		border-radius: 5px;
	}
	
	&__add-to-cart-button{
		position: absolute;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		color: white;
		background-color: #ff9a9e;
		text-align: center;
		padding: 10px;
		z-index: 1;
		cursor: pointer;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
	}
}


/* ----------------- ANIMATION THINGS -----------------*/

.cart-animation-helper {
	margin: 0 20%;
	width: 0;
	height: 0;
	
	&:after{
		opacity: 0;
		border-radius: 0%;
		max-height: $product-height;
		max-width: $product-width;
		
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		display: block;
		height: $product-height;
		width: $product-width;
		background-color: #ff9a9e;
		
		transition: 
			transform 0.8s ease-out,
			margin 0.8s ease-out,
			opacity 0.8s ease-out,
			border-radius 0.4s ease-out,
			max-height 0.4s ease-out,
			max-width 0.4s ease-out;
	}
}


/* 
 * To create the animation curve I used this tutorial: http://tobiasahlin.com/blog/curved-path-animations-in-css/ 
 * and modified it to use the idea with transitions. This way, the animation can be used to generate
 * dynamic values for translate with JavaScript (not in this example).
 */

html, body{
	height: 100%;
	width:100%;
}
body{
	background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67917a', endColorstr='#ccbf82',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

$(document).ready(function(e) {
    $('.product__add-to-cart-button').click(function() {
        var target        = $('.cart').first(),
            target_offset = target.offset();

        var target_x = target_offset.left,
            target_y = target_offset.top;

        console.log('target: ' + target_x + ', ' + target_y);
        
		var obj_id = 1 + Math.floor(Math.random() * 100000),
			obj_class = 'cart-animation-helper',
			obj_class_id = obj_class + '_' + obj_id;
		
        var obj = $("<div>", {
            'class': obj_class + ' ' + obj_class_id
        });

        $(this).parent().parent().append(obj);
		
        var obj_offset = obj.offset(),
			dist_x = target_x - obj_offset.left + 10,
            dist_y = target_y - obj_offset.top + 10,
            delay  = 0.8; // seconds
		
        console.log('obj_off: ' + obj_offset.left + ', ' + obj_offset.top);
		
        setTimeout(function(){
            obj.css({
            	'transition': 'transform ' + delay + 's ease-in',
            	'transform' : "translateX(" + dist_x + "px)"
            });
			$('<style>.' + obj_class_id + ':after{ \
				transform: translateY(' + dist_y + 'px); \
				opacity: 1; \
				border-radius: 100%; \
				max-height: 20px; \
				max-width: 20px; margin: 0; \
			}</style>').appendTo('head');
        }, 0);
		
        
        obj.show(1).delay((delay + 0.02) * 1000).hide(1, function() {
            $(obj).remove();
        });
    });
});