<head>
    <meta charset="UTF-8">
    <title>Page Animations</title>
    <meta name="viewport" content="width=device-width" />
    <!-- <link rel="stylesheet" href="css/page-anim.css" /> -->
</head>
<body>
    <section data-page="home" id="home" class="active">
        <h1>The Page Home</h1>
        <p>Some content on the home page.</p>
        <p><a href="#other" data-role="link">GO TO OTHER</a></p>
    </section>
    <section data-page="other" id="other">
        <h1>The Page Other</h1>
        <p>Some content on the other page.</p>
        <p><a href="#home" data-role="link">GO TO HOME</a></p>
    </section>
    <!-- <script src="js/page-anim.js"></script> -->
</body>
/****
page-anim.css
****/
*{
    padding:0;
    margin: 0;
    box-sizing: border-box;
}
:root {
    font-size: calc(1vw + 1vh + .5vmin);
}
body {
    font: 1rem/1.6 sans-serif;
    width:100%;
    min-height: 100vh;
    overflow: hidden;
}
[data-page]{
    position:fixed; /* or absolute if the content exceeds the height of the page */
    width: 100%;
    min-height: 100vh;
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    transition: transform 0.5s ease-in, opacity 0.5s ease-in; 
    /*
    left: 100%;
    transition: left 1.0s ease-in; 
    */
    z-index: 10;
}
[data-page="home"]{
    background-color: hsl(90, 70%, 20%);
    color: hsl(90, 90%, 90%);
}
[data-page="other"]{
    background-color: hsl(270, 70%, 20%);
    color: hsl(270, 90%, 90%);
}
[data-page].active{
    transform: translate3d(0, 0, 0);
    opacity: 1;
    /**
    left: 0;
    **/
    z-index: 100;
}
[data-role="link"]{
    color: white;
}
section h1{
    padding: 1rem;
    text-align: center;
}
section p{
    padding: 1rem 2rem;
}
//page-anim.js
//iife version of basic animation and navigation (without History API)
var app = (function(){
    let pages = [];
    let links = [];
    
    document.addEventListener("DOMContentLoaded", function(){
        pages = document.querySelectorAll('[data-page]');
        links = document.querySelectorAll('[data-role="link"]');
        //pages[0].className = "active";  - already done in the HTML
        [].forEach.call(links, function(link){
            link.addEventListener("click", navigate)
        });
    });
    
    function navigate(ev){
        ev.preventDefault();
        let id = ev.currentTarget.href.split("#")[1];
        [].forEach.call(pages, function(page){
           if(page.id ===id){
               page.classList.add('active');
           }else{
               page.classList.remove('active');
           } 
        });
        return false;
    }
    
    return {
        pages,
        links,
        xhr: ajax
    }
})();

//the navigate method is private inside our iife
//the variables pages and links are public and can be accessed as app.pages or app.links

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.