RitaDias

var trackableElement;
var menu = document.querySelector(".menu");
var appMenu = document.querySelector(".app-menu-container");
var overlay = document.querySelector(".menu-background");
var burger = document.querySelector(".app-menu-burger");

RitaDias

var touchingElement = false;
var startTime;
var startX = 0,
    startY = 0;
var currentX = 0,
    currentY = 0;

var isOpen = false;
var isMoving = false;
var menuWidth = 0;

RitaDias

function onTouchStart(evt) {
  startTime = new Date().getTime();
  startX = evt.touches[0].pageX;
  startY = evt.touches[0].pageY;

  touchingElement = true;

  touchStart(startX, startY);
}

RitaDias

function touchStart(startX, startY) {
  var menuOpen = document.querySelector(".menu.menu--visible");

  if (menuOpen !== null) {
    isOpen = true;
  } else {
    isOpen = false;
  }

  menu.classList.add("no-transition");

RitaDias

function touchMove(evt, currentX, currentY, translateX, translateY) {
  if (!dragDirection) {
    if (Math.abs(translateX) >= Math.abs(translateY)) {
      dragDirection = "horizontal";
    } else {
      dragDirection = "vertical";
    }

    requestAnimationFrame(updateUi); 
    // this is what actually does the animation (ﾉ◕ヮ◕)ﾉ*:・ﾟ✧

RitaDias

if (dragDirection === "vertical") {
  lastX = currentX;
  lastY = currentY;
} else {
  evt.preventDefault(); 
  // ...
}

RitaDias

if (moveX + (currentX - lastX) < 0 && moveX + (currentX - lastX) > -menuWidth) {
  moveX = moveX + (currentX - lastX);
  // ...
}

RitaDias

moveX + (currentX - lastX)

RitaDias

function updateUi() {
  if (isMoving) {
    var element = document.querySelector(".app-menu-container");

    element.style.transform = "translateX(" + moveX + "px)";
    element.style.webkitTransform = "translateX(" + moveX + "px)";

    requestAnimationFrame(updateUi);
  }
}

RitaDias

overlay.classList.add("no-transition");

var percentageBeforeDif = (Math.abs(moveX) * 100) / menuWidth;
var percentage = 100 - percentageBeforeDif;