CodePen Embed - Full Page Nav

<div class="btn">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="page"></div>
<nav>
  <ul>
    <li><span><a href="#0" data-splitting="chars">Home</a></span></li>
    <li><span><a href="#0" data-splitting="chars">About</a></span></li>
    <li><span><a href="#0" data-splitting="chars">Contact</a></span></li>
    <li><span><a href="#0" data-splitting="chars">Dance</a></span></li>
<div></div>
  </ul>
  
</nav>

@font-face {
  font-family: "Lust Slim";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/LustSlim-Regular.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

$o: #e6a161;
$p: #6929cc;

body {
  display: grid;
  place-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: #fff;
  transition: background 0s ease-in-out;
  transition-delay: 2s;
  &:before{
    content:'';
    position:absolute;
    width:150px;
    height:150px;
    top:0;
    right:0;
    border-radius:0 0 0 500px;
    box-shadow:0 0 0 2px #000;
    background:$o;
    transform:translate(100%, -100%);
    transition:0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2);
  }
  &:not(.active):not(.page){
    &:before{
      transform:translate(5%, -5%);
      transition-delay:1s;
    }
  }
  .btn {
    position: absolute;
    z-index: 999;
    width: 60px;
    height: 50px;
    top: 20px;
    right: 20px;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.2),
      filter 0.1s ease-in-out;
    cursor: pointer;
    &:after {
      content: "";
      position: absolute;
      width: 80px;
      height: 80px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1);
      box-shadow: inset 0 0 0 0px #222, 0 0 0 0px #fff;
      border-radius: 100%;
      transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2),
        box-shadow 0.1s ease-in-out;
      z-index: -1;
    }
    &:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 10px;
      background: #fff;
      transform-origin: right;
      top: 15px;
      right: 10px;
      transform: rotate(-45deg) scaleX(0);
      transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2);
    }
    div {
      background: #222;
      position: absolute;
      width: 100%;
      height: 10px;
      top: 0;
      transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2);
      transition-delay: 0.6s;
      &:nth-of-type(2) {
        top: 20px;
        transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2),
          transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2);
        transition-delay: 0.8s, 0.6s;
      }
      &:nth-of-type(3) {
        top: 40px;
      }
    }
  }
  &.active {
    .btn {
      transform: translateY(0px) rotate(45deg);
      div {
        background: #fff;
        top: 20px;
        transition-delay: 0s;
        &:nth-of-type(2) {
          top: 20px;
          transform: rotate(90deg);
          transition-delay: 0s, 0.2s;
        }
        &:nth-of-type(3) {
          top: 20px;
        }
      }
    }
  }
  &.page {
    nav {
      background: #fff;
    }
    .btn {
      transform: translateX(-25px) translateY(25px) rotate(45deg) scale(0.5);
      transition-delay: 0.3s, 0.2s;
      animation: scrollOut 3.5s cubic-bezier(0.175, 0.885, 0.32, 1.2) 1 forwards;
      animation-delay: 0.6s;
      div {
        @for $i from 1 through 3 {
          &:nth-of-type(#{$i}) {
            background: #fff;
            box-shadow: 0 0 0 3px #fff;
          }
        }
      }
      &:after {
        transition-delay: 0.3s, 0.4s;
        transform: translate(calc(-50% + 2.5px), calc(-50% + 12.5px))
          scale(1.25);
        box-shadow: inset 0 0 0 50px #222, 0 0 0 15px #fff;
      }
      @keyframes scrollOut {
        0% {
          right: 20px;
          transform: translateX(-25px) translateY(25px) rotate(45deg) scale(0.5);
        }
        11% {
          right: -100px;
          transform: translateX(-25px) translateY(25px) rotate(90deg) scale(0.5);
        }
        88.99% {
          right: -100px;
          transform: translateX(-25px) translateY(25px) rotate(225deg) scale(0.5);
        }
        89% {
          right: calc(100% + 60px);
          transform: translateX(-25px) translateY(25px) rotate(0deg) scale(0.5);
        }
        100% {
          right: calc(100% - 110px);
          transform: translateX(-25px) translateY(25px) rotate(225deg) scale(0.5);
        }
      }
      &:before {
        transform: rotate(-45deg) scaleX(1);
        transition-delay: 0.2s;
        box-shadow: 0 0 0 3px #fff;
      }
      div {
        background: #222;
        top: 20px;
        transition-delay: 0s;
        transform: scaleX(0.75) translateX(10px) translateY(-10px);
        &:nth-of-type(2) {
          top: 20px;
          transform: rotate(90deg) translateX(10px) translateY(-25px)
            scaleX(0.75);
          transition-delay: 0s, 0.2s;
        }
        &:nth-of-type(3) {
          top: 20px;
        }
      }
    }
  }
  .page {
    position: absolute;
    width: calc(100% - 15vmin);
    height: calc(100% - 20vmin);
    z-index: 2;
    top: 10vmin;
    left: 7.5vmin;
    pointer-events: none;
    box-shadow: inset -0px 0 0 $o, inset 0px 0 0 $o, inset 0px 0 0 #222;
    clip-path: polygon(
      0 calc(100% - 5px),
      100% calc(100% - 5px),
      100% 100%,
      0% 100%
    );
    transition: box-shadow 0s ease-in-out, clip-path 0.5s ease-in-out,
      background-position 0.4s ease-in-out;
    transition-delay: 1s, 0.5s, 0s;
    background: linear-gradient(
      to bottom,
      transparent 25%,
      $p 25%,
      $p 50%,
      #fff 50%
    );
    background-size: 400% 400%;
    background-position: 50% 0%;
    &:before,
    &:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 5px;
      background: $o;
      bottom: 0;
      transform: scaleX(0);
      transition: 0.5s ease-in-out;
      transition-delay: 1s;
    }
    &:after {
      bottom: auto;
      top: 0;
      background: linear-gradient(
        to right,
        $o,
        $o 25%,
        transparent 25%,
        transparent 75%,
        $o 75%
      );
      transform: scaleX(1);
      background-position: center;
      background-size: 200% 100%;
      transition-delay: 0s;
    }
  }
  &.page {
    background: #222;
    transition-delay: 0s;
    nav ul {
      transform: translateZ(0);
      li{
        &.active{
          span{
            a{
              span.word{
                &:after{
                  -webkit-text-stroke:2px rgba(255,255,255,1);
                }
              }
            }
          }
        }
        span{
          a{
            span.word{
              &:after{
                -webkit-text-stroke:2px rgba(0,0,0,0.0);
              }
            }
          }
        }
      }
    }
    .page {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
      box-shadow: inset -5px 0 0 $o, inset 5px 0 0 $o, inset 0 0 0 40px #222;
      transition: box-shadow 0s ease-in-out, clip-path 0.5s ease-in-out,
        background-position 1.4s ease-in-out;
      transition-delay: 1.5s, 1.5s, 2.5s;
      background-position: 50% 100%;
      &:before {
        transition-delay: 1s;
        transform: scaleX(1);
      }
      &:after {
        transition-delay: 2s;
        background-size: 100% 100%;
      }
    }
    nav {
      transform: translateY(0);
      background: transparent;
      div {
        transform: translate(-50%, 250%) scale(0.5);
      }
    }
  }
  * {
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }
  &.active {
    nav {
      transform: translateY(0);
      transition-delay: 0s, 1.5s;
      div {
        transform: translate(-50%, -50%);
        transition-delay: 0.5s;
      }
    }
    nav ul {
      transform: translateZ(0);
      li:not(.active) {
        transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.175);
        pointer-events: none;
        a {
          span {
            transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.025);
            &:after{
              -webkit-text-stroke:2px rgba(0,0,0,1);
              transition-delay:1s;
            }
            span {
              transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.025);
            }
          }
        }
        @for $i from 1 through 4 {
          &:nth-of-type(#{$i}) {
            transform: rotateX(0);
            transition-delay: #{($i/10) + 0.25}s;
            a {
              pointer-events: all;
              transition: 0.2s ease-in-out;
              transform: translateZ(-5vmin);
              cursor: pointer;
              &:hover {
                transform: translateZ(0vmin);
                transition-delay: 0s;
                span {
                  cursor: pointer;
                  span {
                    &:before {
                      background-position: 50% 70%;
                    }
                  }
                }
              }
              span {
                transition-delay: #{($i/10) + 0.25}s;
                transform: scale(1);
              }
              span span {
                transform: translateY(0);
                @for $j from 1 through 10 {
                  &:nth-of-type(#{$j}) {
                    transition-delay: #{(($j - $i)/25) + ($i / 10) + 0.15}s;
                  }
                }
              }
            }
          }
          &:first-of-type {
            a {
              z-index: 3;
            }
          }
          &:nth-of-type(2) {
            a {
              span span {
                @for $j from 1 through 10 {
                  &:nth-of-type(#{$j}) {
                    transition-delay: #{($i / 10) - (($j - $i)/25) + 0.15}s;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  nav {
    background: #222;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.01),
      background 0s ease-in-out;
    transform: translateY(-100%);
    transition-delay: 0.6s, 1s;
    box-shadow: 0 -10vmin 0 #fff;
    will-change: transform;
    z-index: 2;
  }
  nav ul {
    filter: blur(0px);
    transform: translateZ(500px);
    transition: 0.75s ease-in-out;
  }
  nav,
  nav ul,
  nav ul li {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
  }
  nav {
    div {
      position: absolute;
      width: 50vmin;
      height: 50vmin;
      border-radius: 100%;
      background: $o;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 150%);
      filter: blur(0px);
      z-index: -1;
      transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.175);
      &:before, &:after{
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        border-radius:100%;
        box-shadow:0 0 0 2px #000;
        left:50%;
        top:50%;
        transform:translate(var(--translate2));
      }
      &:after{
        box-shadow:0 0 0 2px #fff;
        transform:translate(var(--translate));
      }
    }
  }
  nav,
  nav ul {
    position: absolute;
    width: 100vw;
    height: 100vh;
    perspective: 25vmin;
    left: 0;
    top: 0;
    li {
      width: 100vw;
      height: 100vh;
      position: absolute;
      box-sizing: border-box;
      top: 0;
      left: 0;
      display: grid;
      place-items: center;
      text-align: center;
      transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.2);
      will-change: transform;
      > span {
        display: inline-block;
      }
      &:first-of-type,
      &:last-of-type {
        height: 75vh;
      }
      &.active {
        height: 0vmin;
        width: 100%;
        padding: 0;
        top: -15vmin;
        left: 0;
        transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.2);
        transition-delay: 0.5s;
        span {
          a {
            span {
              span {
                @for $i from 1 through 10 {
                  &:nth-of-type(#{$i}) {
                    &:before {
                      transition-delay: #{($i/20) + 0.4}s;
                    }
                  }
                }
                &:before {
                  transition: background-position 0.8s
                    cubic-bezier(0.175, 0.885, 0.32, 1.2);
                  background-image: linear-gradient(to bottom, $o 40%, $p 40%);
                  background-position: 50% -150%;
                }
              }
            }
          }
        }
        &:nth-of-type(3) {
          left: auto;
          right: 0;
        }
        &:last-of-type {
          top: auto;
          bottom: calc(100% + 15vmin);
        }
      }
      &:not(.active) {
        &:first-of-type {
          transform-origin: top;
          transform: rotateX(-90deg);
          padding-bottom: 40vmin;
          a span {
            transform-origin: top;
            transform: scaleY(2);
            span {
              transform: translateY(-100vh);
            }
          }
        }
        &:nth-of-type(2) {
          transform-origin: left;
          width: 75vw;
          transform: rotateY(90deg);
          padding-bottom: 25vmin;
          a span {
            transform-origin: right;
            transform: scaleX(2);
            span {
              transform: translateX(-100vw);
            }
          }
        }
        &:nth-of-type(3) {
          transform-origin: right;
          width: 75vw;
          left: auto;
          right: 0;
          bottom: 20vmin;
          transform: rotateY(-90deg);
          padding-top: 10vmin;
          a span {
            transform-origin: left;
            transform: scaleX(2);
            span {
              transform: translateX(100vw);
            }
          }
        }
        &:last-of-type {
          transform-origin: bottom;
          top: auto;
          bottom: 0;
          transform: rotateX(90deg);
          padding-top: 20vmin;
          a span {
            transform-origin: bottom;
            transform: scaleY(2);
            span {
              transform: translateY(100vh);
            }
          }
        }
      }
      &:nth-of-type(even) {
        a {
          span {
            span {
              @for $i from 1 through 10 {
                &:nth-of-type(#{$i}) {
                  &:before {
                    transition-delay: #{($i/30)}s;
                  }
                }
              }
            }
          }
        }
      }
      a {
        color: #222;
        text-decoration: none;
        font-family: "Lust Slim";
        font-size: 20vmin;
        display: inline-block;
        span {
          transition: 0.5s ease-in-out;
          display: inline-block;
          &.word{
            &:after {
              transform-style:preserve-3d;
              content: attr(data-word);
              position: absolute;
              color: transparent;
              left: 50%;
              top: 50%;
              transform:translate(-50%, -50%) translateZ(1px);
              color: rgba(0,0,0,0.0);
              -webkit-text-stroke:2px rgba(0,0,0,0.0);
              z-index:2;
              transition:0.3s ease-in-out;
            }
          }
          span {
            transition: 0.5s ease-in-out;
            color: transparent;
            position: relative;
            @for $i from 1 through 10 {
              &:nth-of-type(#{$i}) {
                &:before {
                  transition-delay: #{0.3 - ($i/30)}s;
                }
              }
            }
            &:before {
              transform-style:preserve-3d;
              content: attr(data-char);
              position: absolute;
              color: transparent;
              left: 50%;
              top: 50%;
              transform: translate(var(--translate));
              -webkit-text-fill-color: transparent;
              -webkit-background-clip: text;
              background-image: linear-gradient(to bottom, #fff 40%, $p 40%);
              color: #222;
              transition: background-position 0.9s
                cubic-bezier(0.175, 0.885, 0.32, 1.2);
              background-size: 300% 300%;
              background-position: 50% 0%;
              z-index:1;
            }
          }
        }
      }
    }
  }
}

View Compiled

Splitting();

$('.btn').click(function(){
  if ($('body').hasClass('page')){
    $('li.active').removeClass('active');
    $('body').removeClass('page');
    $('body').addClass('active');
  } else{
    $('body').toggleClass('active');
  }
});

$('.close').click(function(){
  $('body').addClass('active');
  $('body').removeClass('page');
});

var $filter1 = $(".frequency");
var cells = $('body').find('ul li > span');
container_w = $("body").width(),
container_h = $("body").height();   

$('nav ul').mousemove(function(e){
  
   var pos_x = event.pageX,
      pos_y = event.pageY,
      left  = 0,
      bottom = 0,
      top   = 0;

      left = container_w / 2  - pos_x;
      top  = container_h / 2 - pos_y;
      bottom = container_h / 2 - (pos_y / 2);
  
      $('nav').get(0).style.setProperty("--translate", "calc(-50% + " + left / 50 + "px), calc(-50% + " + top / 50 + "px)" );
      $('nav').get(0).style.setProperty("--translate2", "calc(-50% - " + left / 50 + "px), calc(-50% - " + top / 50 + "px)" );
  
      if ($('body').hasClass('active')){
          for (let j = 0; j < 4; j++) {
             TweenMax.to(
              cells[j], j, 
              { 
                translate: left / (1 * ((j * j) + 2)) + 'px ' + top / (4 * ((j * j) + 2)) + 'px ' + ((bottom / 10) - 100) + 'px',
                rotateX: (top / 48) * -1 + 'deg',
                rotateY: left / 48 + 'deg',
                ease:Expo.easeOut, 
                overwrite: 'all' 

              });
        }
  }
  

});

$('nav a').click(function(){
  if ($(this).parent().parent().hasClass('active')){
    $('body .active').removeClass('active');
    $('body').removeClass('page');
    $('body').addClass('active');
  }else{
    $(this).parent().parent().addClass('active');
    $('body').addClass('page');
    $('body').removeClass('active');
  }
  for (let j = 0; j < 4; j++) {
       TweenMax.to(
        cells[j], (j + 1), 
        { 
          translate: '0px 0px -100px',
          rotateX: '0px',
          rotateY: '0px',
          ease:Expo.easeOut, 
          overwrite: 'all' 
          
        });
    }
});




$('nav ul').mouseleave(function(e){
  $('nav').get(0).style.setProperty("--translate", "calc(-50% + 0px), calc(-50% + 0px)" );
  $('nav').get(0).style.setProperty("--translate2", "calc(-50% + 0px), calc(-50% + 0px)" );
  for (let j = 0; j < 4; j++) {
       TweenMax.to(
        cells[j], (j + 1), 
        { 
          translate: '0px 0px -100px',
          rotateX: '0px',
          rotateY: '0px',
          ease:Expo.easeOut, 
          overwrite: 'all' 
          
        });
  }
});

This Pen is owned by Adam Kuhn on CodePen.

See more by @cobra_winfrey on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript