إضافة لعربة التسوق (طيران الصورة نحو السلة)

السلام عليكم, 

أردت إضافة حركة طياران صورة المنتج إلى سلة الشراء واجهت بعض المشاكل مثل :

-تحديد مكان السلة 

-حساب البعد بينها 

-تحريك الصورة 

الشيفرة كانت كالتالي (بشكل مختصر) :

  <li data-product-count="0"   class="shopping-cart w-16   before:content-[attr(data-product-count)] before:w-5 before:h-5 before:rounded-full before:absolute before:bg-green-400 relative before:left-0 before:-top-2 before:-right-2 before:flex before:justify-center before:items-center border-[1px] rounded-xl   transition-all duration-5 "  data-totalitems="0" ><a href="{{ route('cart.index') }}" >  <i
                                        class="transition-all duration-1000 fa-solid fa-cart-plus"></i></a></li>


...nav  
...
...code 


                                 <a href="javascript:void(0)" id="" class="add-to-cart  " >
                                    <span class=" "></span>
                                        <button
                                            class="  border rounded-lg border-orange-400  p-1 lg:left-[-1.2rem] lg:top-[-1.2rem] left-[-1.2rem] top-[-1.2rem] absolute bg-white">
                                            <i class="fa-solid fa-cart-plus text-orange-400 hover:text-black "></i>
                                        </button>
                                    </a>
...code 

...

style 

.flying-img {
    position: absolute;
    animation: fly_to_cart 1s ease-in-out;
}

@keyframes fly_to_cart {
    0% {
        left: 0;
        top: 0;
    }
    45%, 50% {
        left: var(--left);
        top: 60px;
    }
    80%, 90% {
        left: var(--left);
        top: var(--top);
        transform: scale(.2);
    }
    100% {
        left: calc(var(--left) + 40px);
        top: var(--top);
        transform: scale(.2);
    }
}

js ;

      
const shopping_cart = document.querySelector('.shopping-cart');
const cart_btns = document.querySelectorAll('.add-to-cart');

        // Fly To Shopping Cart Effect

        
        for (cart_btn of cart_btns) {
   
    cart_btn.onclick = (e) => {
        shopping_cart.classList.add('active');


        let product_count = Number(shopping_cart.getAttribute('data-product-count')) || 0;
        shopping_cart.setAttribute('data-product-count', product_count + 1);

        // finding first grand parent of target button 
        let target_parent = e.target.parentNode.parentNode.parentNode.parentNode.parentNode;
        target_parent.style.zIndex = "9000000000000";
        // Creating separate Image
        let img = target_parent.querySelector('img');
        console.log(img);
        let flying_img = img.cloneNode();
        flying_img.classList.add('flying-img');

        target_parent.appendChild(flying_img);

        // Finding position of flying image
       
        const flying_img_pos = flying_img.getBoundingClientRect();
        const shopping_cart_pos = shopping_cart.getBoundingClientRect();
        const ep = cart_btn.getBoundingClientRect();
      

        let data = {
            el:ep.left,
            et:ep.top,
            left: shopping_cart_pos.right - (shopping_cart_pos.width / 2 + flying_img_pos.right + flying_img_pos.width / 2),
            top: shopping_cart_pos.top - flying_img_pos.top +30
        }

        // alert(data.top)

   

        flying_img.style.cssText = `
                                --left : ${data.left.toFixed(2)}px;
                                --top : ${data.top.toFixed(2)}px;
                                --t : ${data.el.toFixed(2)}px;
                                --e : ${data.et.toFixed(2)}px;
                                `;

         setTimeout(() => {
            target_parent.style.zIndex = "";
            target_parent.removeChild(flying_img);
            shopping_cart.classList.remove('active');
        }, 1000);
    }

النتيجة لم تكن كما ارجوا لهذا هل من تصحيح او طريقة اخرى 

شكرا لكم