How to make a magnetic button with GSAP in Elementor

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', (event) => {
    const button = document.querySelector('.magnetic-button');

    if (button) {
        button.addEventListener('mousemove', (e) => {
            const rect = button.getBoundingClientRect();
            const x = e.clientX - rect.left - rect.width / 2;
            const y = e.clientY - rect.top - rect.height / 2;

            gsap.to(button, {
                duration: 0.3,
                x: x * 0.3,
                y: y * 0.3,
                ease: "power2.out"
            });
        });

        button.addEventListener('mouseleave', (e) => {
            gsap.to(button, {
                duration: 0.3,
                x: 0,
                y: 0,
                ease: "power2.out"
            });
        });
    }
});
</script>

.magnetic-button {
    padding: 100px 0px;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    background-color: #F6520C;
    border: none;
    outline: none;
    cursor: pointer;
    overflow: hidden;
}

.magnetic-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: black;
  border: none;
    outline: none;
  border-radius: 50%;
  clip-path: circle(0% at 50% 50%);
  transition: 0.3s all;
}

.magnetic-button:hover::after {
  clip-path: circle(50% at 50% 50%);
}

.magnetic-button:hover span {
  color: white;
  z-index: 2;
}