title: Vanilla Javascript animate margin-left of section
body: <p>I'm having an issue getting my slider to work. It's a simple system of clicking buttons to get to and from sections but I'm having issues getting it to work.
  I have made a codepen here: <a href="https://codepen.io/ItsBrianAgar/pen/JrbZEz" rel="nofollow noreferrer">https://codepen.io/ItsBrianAgar/pen/JrbZEz</a></p>
  
  <p>This is the js I have so far.
  It needs to be Vanilla Js</p>
  
  <pre><code>    var nextSection = function() {
      var username = document.querySelector("input[name=\"username\"]").value;
      var password = document.querySelector("input[name=\"password\"]").value;
      if (username.length &amp;&amp; password.length &gt; 4) {
        return window.location = "appSection.html";
      } else {
        alert("username and password must be longer than 4 characters");
      }
    }
  
    var nextPage = function() {
      var elem = document.getElementsByClassName("app");
      var pos = 0;
      var posDiff = 0;
      var currentPos = elem[1].style.marginLeft;
      var id = setInterval(frame, 5);
      function frame() {
        if (posDiff == -320) {
          clearInterval(id);
          posDiff = 0;
        } else {
          pos--;
          for (var i = 0; i &lt; elem.length; i++) {
            elem[i].style.marginLeft = pos + 'px';
          }
          posDiff = currentPos + pos;
        }
      }
    }
  
    document.getElementById("cancel").onclick = previousPage = function() {
      var elem = document.getElementsByClassName("app");
      var pos = 0;
      var id = setInterval(frame, 5);
      function frame() {
        for (var i = 0; i &lt; elem.length; i++) {
          if (pos == 640) {
            clearInterval(id);
          } else {
            elem[i].style.marginLeft = pos + 'px';
            pos += 320;
          }
        }
      }
    }
  </code></pre>