// Init .innerHTML for circle
let startText = document.querySelector('.circle').innerHTML = "click";
let circle = document.querySelector('.circle');

var x = 0;
let titleContainer = document.querySelector('.circle');
let progressContainer = document.querySelector('.progress-container');
let avatar = document.querySelector('.avatar');
let avatarSize = document.querySelector('.avatar').clientWidth;
let totalLevels = 5;

// Listen for events
circle.addEventListener('click', mainClickMaze);

// Start position of smaller circle on progressContainer
function moveAvatarForward() {
  let progressContainerWidth = progressContainer.clientWidth;
  let sum = Math.round(progressContainerWidth / totalLevels);
  console.log(sum);

  requestAnimationFrame(frame);

  let pos = 0;

  function frame() {
    if (pos != sum) {
      pos++;
      avatar.style.marginLeft = pos + "px";
      requestAnimationFrame(frame);
    }
  }
}

// Move the avatar based on its previous location
function locationOfAvatar() {
  let pos = avatar.style.marginLeft;
  // Remove "px" from pos
  pos = pos.substring(0, pos.length - 2);
  pos = parseInt(pos);

  let progressContainerWidth = progressContainer.clientWidth;
  let sum = Math.round(progressContainerWidth / totalLevels);
  let movePos = pos + sum;
  console.log(movePos);
  requestAnimationFrame(frame);

  function frame() {
    if (pos != movePos) {
      pos++;
      avatar.style.marginLeft = pos + "px";
      requestAnimationFrame(frame);
    }
  }
}


// Avatar gets moved to the end of the continer
function endOfAvatar() {
  let pos = avatar.style.marginLeft;
  pos = pos.substring(0, pos.length - 2);
  pos = parseInt(pos);

 // Get size of small circle in progressContainer so that avatarSize does not exceed the bounds of progressContainer
let avatarSize = document.querySelector('.avatar').clientWidth;

let progressContainerWidth = progressContainer.clientWidth;

let sum = progressContainerWidth - avatarSize;
  console.log(sum);

  requestAnimationFrame(frame);

  function frame() {
    if (pos != sum) {
      pos++;
      avatar.style.marginLeft = pos + "px";
      requestAnimationFrame(frame);
    }
  }
}



let click = 0;

function mainClickMaze(event) {
  titleContainer.innerHTML = ++click;
  console.log('click:', click)
  if (click == 1) {
    progressContainer.style.display = 'flex';
  } else if (click == 2) {
    moveAvatarForward();
  } else if (click == 3) {
    locationOfAvatar();
  } else if (click == 4) {
    locationOfAvatar();
  } else if (click == totalLevels) {
    // Remove event listener 
    circle.removeEventListener('click', mainClickMaze);
    titleContainer.innerHTML = 'Disabled';
    endOfAvatar();
  }
}

<div class="container">
    <div class="circle"></div>
    <div class="move-container">
      <div class="move-back user-click">Back</div>
      <div class="move-forward user-click">Forward</div>
    </div>
    <div class="progress-container">
      <div class="avatar"></div>
    </div>
</div>