как анимировать изображение в корзину?

Question

Я знаю, что доступна инфраструктура jquesry, но я хотел создать свою собственную функцию для анимации элемента изображения, летящего в корзину в машинописном тексте. Пока я не могу создать клон стороны изображения элемента, но я не возможность переместить изображение в корзину здесь, что я пробовал

Страница продукта:

функция машинописи:

    function addToCart(id){ 
                  total += parseInt(qty.value) || 1;
                  cartTotal.innerHTML = total.toString(); 

                 let item:HTMLElement = <HTMLElement>document.getElementById(id);
                 let cart:HTMLImageElement = <HTMLImageElement>document.getElementsByClassName("shopping-cart").item(0);

                   console.log(cart)
                   console.log(item.querySelector("img"));

                   itemImg = <HTMLElement>item.querySelector("img")
                  console.log(itemImg);

                  if(itemImg){
                          copyImg = <HTMLElement>itemImg.cloneNode();
                          console.log();
                          copyImg.style.opacity = "0.5";
                          copyImg.style.position = "absolute";
                         copyImg.style.width = "150px"
                          copyImg.style.height = "150px"
                          copyImg.style.zIndex = "100";
                         //  copyImg.offsetTop= item.offsetTop;  //offset giving me readonly error

                        document.getElementById("body").appendChild(copyImg);

                    copyImg.animate([ { opacity: 1, easing: 'ease-out' }, 
                                   { opacity: 0 },
                                        ],
                                    3000); 
                }

 }