"Toss" Add to Cart Animation

index.html

<div id="cart" class="cart" data-totalitems="0">
  <i class="fas fa-shopping-cart"></i>
</div>

<div class="page-wrapper">
  <button id="addtocart">
    Add to Cart
    <span class="cart-item"></span>
  </button>
</div>

script.js

$(document).ready(function(){
  $('#addtocart').on('click',function(){
    
    var button = $(this);
    var cart = $('#cart');
    var cartTotal = cart.attr('data-totalitems');
    var newCartTotal = parseInt(cartTotal) + 1;
    
    button.addClass('sendtocart');
    setTimeout(function(){
      button.removeClass('sendtocart');
      cart.addClass('shake').attr('data-totalitems', newCartTotal);
      setTimeout(function(){
        cart.removeClass('shake');
      },500)
    },1000)
  })
})

scripts

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

style.scss

html,body {
  height:100%;
  min-height:100%;
  font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;
}

*,*:before,*:after {
  box-sizing:border-box;
}

.page-wrapper {
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  button {
    padding:20px;
    border:none;
    background:lighten(#292d48,65);
    position:relative;
    outline:none;
    border-radius:5px;
    color:#292d48;
    font-size:18px;
    .cart-item {
      position:absolute;
      height:24px;
      width:24px;
      top:-10px;
      right:-10px;
      &:before {
        content:'1';
        display:block;
        line-height:24px;
        height:24px;
        width:24px;
        font-size:12px;
        font-weight:600;
        background:#2bd156;
        color:white;
        border-radius:20px;
        text-align:center;
      }
    }
    &.sendtocart {
      .cart-item {
        display:block;
        animation: xAxis 1s forwards cubic-bezier(1.000,0.440,0.840,0.165);
        &:before {
          animation: yAxis 1s alternate forwards cubic-bezier(0.165, 0.840, 0.440, 1.000);
        }
      }
    }
  }
}

.cart {
  position:fixed;
  top:20px;
  right:20px;
  width:50px;
  height:50px;
  background:#292d48;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  i {
    font-size:25px;
    color:white;
  }
  &:before {
    content:attr(data-totalitems);
    font-size:12px;
    font-weight:600;
    position:absolute;
    top:-12px;
    right:-12px;
    background:#2bd156;
    line-height:24px;
    padding:0 5px;
    height:24px;
    min-width:24px;
    color:white;
    text-align:center;
    border-radius:24px;
  }
  &.shake {
    animation: shakeCart .4s ease-in-out forwards;
  }
}

@keyframes xAxis {
  100% {
    transform: translateX(calc(50vw - 105px));
  }
}

@keyframes yAxis {
  100% {
    transform: translateY(calc(-50vh + 75px));
  }
}

@keyframes shakeCart {
  25% {
    transform:translateX(6px)
  }
  50% {
    transform:translateX(-4px);
  }
  75% {
    transform:translateX(2px);
  }
  100% {
    transform:translateX(0);
  }
}

toss-add-to-cart-animation.markdown

"Toss" Add to Cart Animation

A Pen by Jesse Couch on CodePen.

License.