Page Slide Without a Framework

css.css

body{
	position: relative;
	-webkit-transition: left .2s ease;
}

step1.js

document.addEventListener('DOMContentLoaded', function() {
  replaceLinks();
});

function replaceLinks(){
	var links = document.querySelectorAll('a');
	
	for (i=0; i<links.length; i++){
		var link = links[i];
		link.addEventListener("click",replacePage, false);
	}
	
}

step2.js

event.preventDefault();
var href= this.href;
	
var ajax = new XMLHttpRequest();
ajax.open("GET",href,true);
ajax.send();

step3.js

body.style.left = "-100%";

step4.js

body.addEventListener( 'webkitTransitionEnd', moveToRight, false);

function moveToRight(event){
	var body = document.querySelector('body');
	body.removeEventListener( 'webkitTransitionEnd', moveToRight, false);
	body.addEventListener( 'webkitTransitionEnd', returnToCenter, false);
	body.style.opacity = 0;
	body.style.left = "100%"
}

step5.js

function returnToCenter(event){
	var body = document.querySelector('body');
	body.removeEventListener( 'webkitTransitionEnd', returnToCenter, false);
	body.innerHTML = bodyContent;
	history.pushState(null, null, href);
	body.style.opacity = 1;
	body.style.left = 0;
	replaceLinks();
}

step6.js

window.addEventListener("popstate", handleBackButton);

function handleBackButton(e) {

	var ajaxBack = new XMLHttpRequest();
	ajaxBack.open("GET",location.pathname,true);
	ajaxBack.send();

	ajaxBack.onreadystatechange=function(){
		var bodyBack = document.querySelector('body');
		var bodyBackContent =  grabBody(ajaxBack.responseText, "body");
		bodyBack.addEventListener( 'webkitTransitionEnd', moveToLeft, false);
		bodyBack.style.left = "100%";

		function backToCenter(event){
			var body = document.querySelector('body');
			body.removeEventListener( 'webkitTransitionEnd', backToCenter, false);
			body.innerHTML = bodyBackContent;
			body.style.opacity = 1;
			body.style.left = 0;
			replaceLinks();
		}

		function moveToLeft(event){
			var body = document.querySelector('body');
			body.removeEventListener( 'webkitTransitionEnd', moveToLeft, false);
			body.addEventListener( 'webkitTransitionEnd', backToCenter, false);
			body.style.opacity = 0;
			body.style.left = "-100%"
		}
	}
}