gradual stop of moving objects

[fin329]

Hey, I'm currently working on a project with simple moving objects that should be stopped on target.

Subjects are asked to stop a moving object on a specific target via keyboard input. The objects should stop gradually and I'm struggling with implementing that. Has anyone done a similar task before or suggestions/solutions for the gradual stop?
I'm quite new to JsPsych/JS and happy for any input or help!

[fin329]

This is part of the current function I use as a stimulus in a canvas plugin. The object slows down with every keypress, but it should slow down after the key is pressed once. I tried with an if loop, but somehow I couldn't find the mistake. Has anyone a hint on a solution?

        var ctx = c.getContext("2d");
                    // objects
                    var ObjX = 0;
                    window.requestAnimationFrame(function loop(){
                      for (let i = 0; i < 3; i++){
                        var ObjXLoop = ObjX += 1;
                      }
            ctx.clearRect(0,0,600,300);
            
            ctx.beginPath();
            ctx.moveTo(0, 150);
            ctx.lineTo(400, 150);
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'grey';
            ctx.stroke();

            ctx.fillStyle = 'lightgrey';
            ctx.fillRect(400,90,120,120);

            ctx.fillStyle ='green';
            ctx.fillRect(ObjX,100,100,100);

          

            window.requestAnimationFrame(loop);
          
        });

          document.addEventListener('keydown', function (event){
            if (event.key === ' '){  
              window.requestAnimationFrame(function loopKeypress(){
              var ObjXLoop = ObjX -=  1
              ctx.clearRect(0,0,600,300);
              
              ctx.beginPath();
              ctx.moveTo(0, 150);
              ctx.lineTo(400, 150);
              ctx.lineWidth = 2;
              ctx.strokeStyle = 'grey';
              ctx.stroke();

              ctx.fillStyle = 'lightgrey';
              ctx.fillRect(400,90,120,120);

              ctx.fillStyle ='green';
              ctx.fillRect(ObjXLoop,100,100,100);

              window.requestAnimationFrame(loopKeypress);
              });