ok so im making a html game. am having trouble with movement animation (using a gif) (not using any js libraries)

Question

when I move left or right it changes the image src so the character is looking the other direction. but the way the code is set. once holding down left or right it changes the image src but cause your constantly holding down left or right its constantly changing the image src to the same one which keeps restarting the gif. Here is the link to the code pen the gifs don't work because its saved locally on my computer but there is the code.

(function() {
  var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");

  // resize the canvas to fill browser window dynamically
  window.addEventListener("resize", resizeCanvas, false);

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    /**
     * Your drawings need to be inside this function otherwise they will be reset when
     * you resize the browser window and the canvas goes will be cleared.
     */
    drawStuff();
  }
  resizeCanvas();

  function drawStuff() {
    // do your drawing stuff here

    var up = false,
      right = false,
      down = false,
      left = false,
      x = window.innerWidth / 2 - 130 / 2,
      y = window.innerHeight / 2 - 130 / 2;

    document.addEventListener("keydown", press);

    function press(e) {
      if (e.keyCode === 87 /* w */ ) {
        up = true;
      }

      if (e.keyCode === 83 /* S */ ) {
        down = true;
      }

      if (e.keyCode === 65 /* A */ ) {
        left = true;

        // 1 for loop
        for (let i = 0; i < 1; i++) {
          // block of code
          document.getElementById("girl flying").src =
            "sprites/characters/girl flying left.gif";
        }
      }

      if (e.keyCode === 68 /* D */ ) {
        right = true;

        // 1 for loop
        for (let i = 0; i < 1; i++) {
          // block of code
          document.getElementById("girl flying").src =
            "sprites/characters/girl flying right.gif";
        }
      }
    }

    document.addEventListener("keyup", release);

    function release(e) {
      if (e.keyCode === 87 /* w */ ) {
        up = false;
      }

      if (e.keyCode === 83 /* S */ ) {
        down = false;
      }

      if (e.keyCode === 65 /* A */ ) {
        left = false;
        document.getElementById("girl flying").src =
          "sprites/characters/girl flying left.gif";
      }

      if (e.keyCode === 68 /* D */ ) {
        right = false;
        document.getElementById("girl flying").src =
          "sprites/characters/girl flying right.gif";
      }
    }

    function gameLoop() {
      var img = document.querySelector("img");
      if (up) {
        y = y - 5;
      }
      if (right) {
        x = x + 5;
      }
      if (down) {
        y = y + 5;
      }
      if (left) {
        x = x - 5;
      }
      img.style.left = x + "px";
      img.style.top = y + "px";

      window.requestAnimationFrame(gameLoop);
    }
    window.requestAnimationFrame(gameLoop);
  }
})();

* {
  margin: 0;
  padding: 0;
}


/* to remove the top and left whitespace */

html,
body {
  width: 100%;
  height: 100%;
}


/* just to be sure these are full screen*/

canvas {
  display: block;
}


/* To remove the scrollbars */

body {
  background: linear-gradient( 180deg, hsl(255, 75%, 50%) 0%, hsl(196, 90%, 50%) 100%);
  background-size: 100vw 100vh;
}

img {
  position: fixed;
  font-size: 130px;
}

<img id="girl flying" src="sprites/characters/girl flying left.gif">

<canvas id="canvas"></canvas>