Router.js

var subPages = {
  'index': {
    'name': 'Whazzzzup',
    'content': 'Welcome to MyTurrn',
  },
  'about': {
    'name': 'Who are we?',
    'content': 'We got founded back in 2014',
  },
  'contact': {
    'name': 'Contact us',
    'content': 'Please, come hang out with us',
  },
  'not-found': {
    'name': '404. Not found',
    'content': 'The page you are looking for cant be found. <a href="#!/">Go back</a>.',
  }
};

var Router = {

  read: function(pages) {
    var key, keys, hash = window.location.hash;

    if(hash.indexOf('#!/') === -1) {
      window.location.hash = '#!/';
      return false;
    }

    key = hash.split('#!/').pop();

    if(key.length === 0) {
      pages.index();
      return false;
    }

    if(key.indexOf('/') !== -1) {
      keys = key.split('/');
      key = keys.shift();
    }

    if(pages[key] === undefined) {
      pages.notFound(key);
      return false;
    }

    pages[key].apply(null, keys);
  },

  set: function(path) {
    window.location.hash = '#!/'+path;
  },

  init: function(pages) {
    var run = this.read.bind(this, pages);
    run();
    window.addEventListener('hashchange', run, false);
  }

};

$(window).load(function() {

  var setPage = function(page, val) {

    $('a').removeClass('active');
    $('a[href="'+window.location.hash+'"]').addClass('active');

    var $pageTitle = $('.page-title-js');
    var $content = $('.content-js');

    TweenLite.to($pageTitle, 0.75, {
      css: { opacity: "0", left: "-200px" },
      delay: 1,
      ease: Power4.easeOut,
      onComplete: function() { $pageTitle.html(val['name']); }
    });

    TweenLite.to($pageTitle, 0.5, {
      css: { opacity: "1", left: "0px" },
      delay: 1.75,
      ease: Power4.easeOut
    });

    TweenLite.to($content, 0.75, {
      css: { opacity: "0", left: "-200px" },
      delay: 1,
      ease: Power4.easeOut,
      onComplete: function() { $content.html(val['content']); }
    });

    TweenLite.to($content, 0.5, {
      css: { opacity: "1", left: "0px" },
      delay: 1.75,
      ease: Power4.easeOut
    });

  };

  Router.init({
    index: function() {
      setPage('index', subPages['index']);
    },
    about: function() {
      setPage('about', subPages['about']);
    },
    contact: function() {
      setPage('contact', subPages['contact']);
    },
    notFound: function() {
      setPage('notFound', subPages['not-found']);
    }
  });

});



<nav>
  <ul>
    <li><a href="#!/">Home</a></li>
    <li><a href="#!/about">About us</a></li>
    <li><a href="#!/contact">Contact</a></li>
  </ul>
</nav>

<div class="app app-js">
  <h1 class="page-title page-title-js"></h1>
  <div class="content content-js"></div>
</div>