cartindicator.js

import anime from 'animejs';

const cartButton = document.querySelector('.header__cart');
const cartIndicator = document.querySelector('.delivery__cart-indicator');
document.body.addEventListener('click', event => {
        const { pageX, pageY } = event;

        const bodyRect = document.body.getBoundingClientRect();
        const cartButtonRect = cartButton.getBoundingClientRect();
        const cart = {
            y: cartButtonRect.top - bodyRect.top,
            x: cartButtonRect.left - bodyRect.left,
        };

        const clickPosition = {
            x: pageX - 22,
            y: pageY - 22
        };

        anime({
            targets: cartIndicator,
            left: clickPosition.x,
            top: clickPosition.y,
            scale: 0,
            duration: 0,
            complete() {
                anime({
                    targets: cartIndicator,
                    scale: [.5, 1, 1, .5, 0],
                    left: cart.x,
                    top: cart.y,
                    duration: 500,
                    easing: 'easeInOutQuad',
                    direction: 'normal',
                    complete() {
                        anime({
                            targets: cartIndicator,
                            scale: 0
                        })
                    }
                });
            }
        });
});