Animate div towards mouse coordinates using JavaScript on click

I am trying to get the ball element to both move and shrink towards the goals on mouse click.
I have created a function that grabs the coordinates of the mouse click in the goals, however I have been struggling with the ball animation.

I thought about using keyframes, but I don’t know how to use keyframes in JavaScript.
I also tried doing a transform – which I know wouldn’t work, but tried as you can see in the move() function.

This is my javascript/html file

    function goal(){   
        var score = getScore();
        document.getElementById("score").innerHTML = score + 1 ;
        var b = getShotCordinates();
    function save(){
    function resetScore(){
        document.getElementById("score").innerHTML = 0;
    function getScore(){
        return parseInt(document.getElementById("score").innerHTML);
    function move(x,y){
        const fxMove = `translate(${x}px, ${y}px);`;
        const fxAnim = `transition: transform 0.5s; transform: translate(0, 0);`;
        document.getElementById("ball").style.transform = translate(x,y); 
    function getShotCordinates(){
        var e = window.event;
        var Cordinates = [e.clientX, e.clientY];
        console.log(Cordinates[0] + " - " + Cordinates[1])
        return Cordinates;
                <div id="canvas" class="field">
                    <div id="goals" class="goals" onclick="goal()">
                    <div id="goalkeeper" onclick="save()">
                    <div id="kick-off">
                        <div id="ball" class="ball">
                    <div id="score-container">
                        <div id="counter">
                            <h1 class="counter-text">Score</h1>
                            <h1 class="counter-score" id="score">0</h1>
                <script src='js/script.js'></script>

Just in case, this is my canvas/UI
enter image description here

>Solution :

If you are looking for something like this:

const div = document.querySelector("div");

document.addEventListener("click", (e)=>{
  console.log(e) = e.clientY + "px"; = e.clientX + "px";
  transform:translate(-50%, -50%);

Just give the ball position absolute, and on every click event change the top and the left of the ball with javascript.

Leave a Reply