Animate to Cart Widget

by pphheerroonn

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.add-to-cart-buttons').on('click',function(){
        // Optional? Scroll to top if cart icon is hidden on top
        $('html, body').animate({
            'scrollTop' : $(".cart_anchor").position().top
        });
        
        //Select item image and pass to the function
        var itemImg = $(this).parent().find('img').eq(0);
        
        flyToElement($(itemImg), $('.cart_anchor'));
    });
});

function flyToElement(flyer, flyingTo) {
    var $func = $(this);
    var divider = 3;
    var flyerClone = $(flyer).clone();
    $(flyerClone).css({position: 'absolute', top: $(flyer).offset().top + "px", left: $(flyer).offset().left + "px", opacity: 1, 'z-index': 1000});
    $('body').append($(flyerClone));
    var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
    var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height()/divider)/2;
     
    $(flyerClone).animate({
        opacity: 0.4,
        left: gotoX,
        top: gotoY,
        width: $(flyer).width()/divider,
        height: $(flyer).height()/divider
    }, 300,
    function () {
        $(flyingTo).fadeOut('fast', function () {
            $(flyingTo).fadeIn('fast', function () {
                $(flyerClone).fadeOut('fast', function () {
                    $(flyerClone).remove();
                });
            });
        });
    });
}
</script>

<a class="cart_anchor">Cart</a>
<ul class="items">
    <li><img src="https://www.compub.com/media/catalog/product/cache/1/image/600x600/9df78eab33525d08d6e5fb8d27136e95/1/0/1030003732_56.jpg" /><a href="javascript:void(0);" class="add-to-cart-buttons">Add to cart</a></li>
    <li><img src="https://www.compub.com/media/catalog/product/cache/1/image/600x600/9df78eab33525d08d6e5fb8d27136e95/1/0/1030003732_56.jpg" /><a...

CSS

.cart_anchor{ 
    float:right; 
    vertical-align:top; 
    background: url('images/cart-icon.png') no-repeat center center / 100% auto;
    width: 50px;
    height: 50px; 
    margin-bottom: 50px;
}
img{
  max-width:100px;
}