JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="navigation">
   <nav>
     <ul>
       <li>Hello</li>
       <li>Hello</li>
       <li>Hello</li>
     </ul>
   </nav>
</div>

SCSS

body {
  background: #20262E;
  padding: 0;
  margin: 0;
}

.navigation {
  background: red;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(101% 0, 100% 0, 101% 100%, 116% 100%);
  clip-path: polygon(101% 0, 100% 0, 101% 100%, 116% 100%);
  visibility: hidden;
  -webkit-transition: visibility .6s step-end, -webkit-clip-path .6s cubic-bezier(.645, .045, .355, 1);
  transition: 
    visibility .6s step-end, 
    -webkit-clip-path .6s cubic-bezier(.645, .045, .355, 1),
    clip-path .6s cubic-bezier(.645, .045, .355, 1);
}

.navigation-open {
  -webkit-clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
  clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
  visibility: visible;
  -webkit-transition: visibility .6s step-start, -webkit-clip-path .6s cubic-bezier(.645, .045, .355, 1);
  transition: 
    visibility .6s step-start, 
    -webkit-clip-path .6s cubic-bezier(.645, .045, .355, 1),
    clip-path .6s cubic-bezier(.645, .045, .355, 1);
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    document.querySelector('.navigation').classList.add('navigation-open');
  }, 1000);
});