Vanilla Javascript animate margin-left of section

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: http://ift.tt/2xsF76R

This is the js I have so far. It needs to be Vanilla Js

    var nextSection = function() {
    var username = document.querySelector("input[name=\"username\"]").value;
    var password = document.querySelector("input[name=\"password\"]").value;
    if (username.length && password.length > 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 < 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 < elem.length; i++) {
        if (pos == 640) {
          clearInterval(id);
        } else {
          elem[i].style.marginLeft = pos + 'px';
          pos += 320;
        }
      }
    }
  }