- let url1 = 'http://img1.exportersindia.com/product_images/bc-small/dir_55/1620613/cannondale-jekyll-1-2011-mountain-bike-309779.jpg';

- let url2 = 'http://cdn1.iconfinder.com/data/icons/jigsoar-icons/24/_cart.png';

header
  h1 New Arrivals !
  span
    img#cart(src=url2)
main
  .item
    img(src=url1)
    h2 Mountain Bike
    .footer
      b &#8377 5600
      button.add-to-cart Add to cart

@mixin flex-cb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body {
  background-color: wheat;
  color: #333;
  padding: 0 2rem;
}

header {
  @include flex-cb;
  h1 {
    background: lightskyblue;
    padding: 0 1rem;
  }
}

.item {
  background-color: #fff;
  padding: 10px 30px;
  border-radius: 5%;
  width: 175px;
  img {
    height: 175px;
  }
  h2 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
  }
  .footer {
    @include flex-cb;
    b {
      color: brown;
    }
    button {
      font-size: 0.9rem;
    }
  }
}

.wiggle {
  display: inline-block;
  animation: wiggle 1s;
}

@keyframes wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  85% {
    transform: rotate(30deg);
  }
  95% {
    transform: rotate(-30deg);
  }
}

console.clear();
const $on = (ele, type, fn) => ele.addEventListener(type, fn);
      
$on(document, "click", (e) => {
  if (!e.target.matches(".add-to-cart")) return;

  const item = e.target.closest(".item"),
    clone = item.querySelector("img").cloneNode(),
    cart = document.querySelector("#cart");

  item.prepend(clone);

  let { top: y2, left: x2 } = cart.getBoundingClientRect();
  let { top: y1, left: x1 } = clone.getBoundingClientRect();

  Object.assign(clone.style, {
    position: "fixed",
    opacity: 0.5,
    scale: 0,
    translate: `${x2 - x1 - 60}px ${y2 - y1 - clone.height / 2}px`,
    transition: `all 1s ease-in-out`
  });

  $on(clone, "transitionstart", () => {
    cart.classList.add("wiggle");
  });

  $on(clone, "transitionend", () => {
    cart.classList.remove("wiggle");
    clone.remove();
  });
});