Animation keeps replaying upon click

[jiyorude]

An animation plays when I click a button. The button is sent to the left of the screen and leaves the screen. During the same time, a prompt is sent from the right off screen towards the center of the screen, giving the player three options (making a RPS game). However, around the div there are still areas where the cursor changes into a pointer. When I click there, the animation abruptly plays again. How do I prevent this?

I've tried to make anime.remove functions in combination with promises, changing the display to none inside the animation, tried to remove things from the DOM. It does not work and remains there. I've tried pointer-events: none. How do I get rid of the button after the animation has been completed or prevent the animation from replaying?

gameInit contains a couple of animations that play once the user enters the webpage. Once done, it loops a simple scale animation on the button (buttonBounce). When clicked, it starts startGameAni.

Code:

`let gameInit = anime.timeline({ easing: "easeInOutExpo", duration: 3000, });

gameInit .add({ targets: ".buttondiv", scale: [0, 1], delay: 1000, duration: 750, }) .add( { targets: "#srps-div", opacity: [0, 1], translateY: [-50, 0], duration: 750, }, "-=200" ) .add( { targets: "#srps-tag", opacity: [0, 1], duration: 750, }, "-=800" ) .add( { targets: "#code-tag", opacity: [0, 1], duration: 750, }, "-=950" );

gameInit.finished.then(function () { let buttonBounce = anime.timeline({ duration: 1200, easing: "easeInOutExpo", loop: true, direction: "alternate", delay: 3000, });

buttonBounce.add({ targets: ".buttondiv", scale: [1, 1.25], }); });

document.querySelector(".buttondiv").onclick = function () { gameStart(); };

removeEl = () => { anime.remove(".buttondiv"); };

gameStart = () => { let startGameAni = anime.timeline({ duration: 1200, easing: "easeInOutBack", direction: "fowards", loop: false, });

startGameAni .add({ targets: ".buttondiv", translateX: [0, -3000], opacity: [1, 0] }) .add({ targets: "#choiceprompt", opacity: [0, 1], translateX: [3000, 0], }); };

gameStart.finished.then(removeEl);`

[jiyorude]

Apparently it is something that needs to be fixed in the animation itself, but I cannot figure out what. I've succesfully removed the element from the DOM, yet it still keeps playing after clicking near the prompt. I know that because once I restart the page, it automatically skips over the first animation the button was supposed to participate in

Here is a video of the issue: Video

[jiyorude]

Sorry for making this post, I just fixed it myself.

It seemed the previous animation was interfering with the base position of the element. I gave the element a base position outside of the main element and added a second animation after the swipe animation that changed the margin-top to -3000 pixels. Now since it's out of the way and everything works like it should!

document.querySelector(".buttondiv").onclick = function () {
  gameStart();
};

gameStart = () => {
  let startGameAni = anime.timeline({
    duration: 1200,
    easing: "easeInOutBack",
    direction: "fowards",
    loop: false,
  });

  startGameAni
    .add({
      targets: ".buttondiv",
      translateX: [0, -3000],
      opacity: [1, 0],
    })
    .add({
      targets: "#choiceprompt",
      opacity: [0, 1],
      translateX: [3000, 0],
    })
    .add({
      targets: ".buttondiv",
      marginTop: [0, -3000],
    });
};