CodePen Embed - fly to cart

<div class="container position-relative" id="itemList">
  <div id="show" class="position-absolute fly-cart">
    <img class="img-fluid" src="" alt="">
  </div>
  <div class="d-flex justify-content-end pt-3 pb-5">
    
   <i id="cart" class="fas fa-shopping-cart"></i>
  </div>
  
  <div class="row mb-4">
    <div class="col-3 item">
      <img class="img-fluid" src="https://pokemon.wingzero.tw/assets/pokemon/387.png" alt="">
      <div>
        <button class="btn btn-info"><i class="fas fa-cart-plus"></i></button>
      </div>
    </div>
    <div class="col-3 item">
      <img class="img-fluid" src="https://pokemon.wingzero.tw/assets/pokemon/388.png" alt="">
      <div>
        <button class="btn btn-info"><i class="fas fa-cart-plus"></i></button>
      </div>
    </div>
    <div class="col-3 item">
      <img class="img-fluid" src="https://pokemon.wingzero.tw/assets/pokemon/389.png" alt="">
      <div>
        <button class="btn btn-info"><i class="fas fa-cart-plus"></i></button>
      </div>
    </div>
  </div>
</div>

.fly-cart{
  z-index: 9999;
/*   transition: 2s; */
  fliter: brightness(200%);
  width:200px;
}

let itemList=$("#itemList").offset().left;
let cartPos=$("#cart").offset().left;
var flyTo;
// console.log(cartPos)

$(".btn").click(function(){
  let item=$(this).closest(".item");
  let img=item.find("img").attr("src");
  let itemX=item.offset().left-itemList;
  let itemY=item.offset().top;
  TweenMax.killTweensOf('#show');
  
  $("#show")
    .css({
      left: itemX,
      top: itemY,
      width: 200,
      opacity: 1
    })
    .find("img").attr("src", img)
  
  TweenMax.to("#show", 0.8, {left:cartPos-itemList, top: 10, width: 20});
  TweenMax.to("#show", .3, {
    css:{
      opacity: 0
    }, delay:0.5})
  
});

This Pen is owned by deathhell on CodePen.

See more by @deathhell on CodePen

External CSS

External JavaScript