Você pode verificar se o `scroll` foi até o elemento desejado. Os créditos da  função `isScrolledIntoView` vem [dessa resposta][1].

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function move() {
      var elem = document.getElementById("myBar");
      var porcentagem = document.querySelector("span");
      var width = 1;
      var id = setInterval(frame, 10);

      function frame() {
        if (width >= 100) {
          clearInterval(id);
        } else {
          width++;
          porcentagem.textContent = width + '%';
          elem.style.width = width + '%';
        }
      }
    }

    window.onscroll = isScrolledIntoView;

    function isScrolledIntoView() {
        var elemTop = document.getElementById('teste').getBoundingClientRect().top;
        var elemBottom = document.getElementById('teste').getBoundingClientRect().bottom;

        var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
        if (isVisible ) move();
    }

<!-- language: lang-css -->

    #teste {
      margin-top: 500px;
    }

<!-- language: lang-html -->

    <div class="w3-container">
      <h2>Dynamic Progress Bar</h2>
      <div class="w3-light-grey">
        <div id="myBar" class="w3-green" style="height:24px;width:0"><span></span></div>
      </div>
      <br>

      <button class="w3-button w3-green" onclick="move()">Click Me</button>
      <div id="teste">
        Sou um teste
      </div>
    </div>

<!-- end snippet -->


  [1]: https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling