JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div id="test">
   <nav>
     <ul>
       <li>Hello</li>
       <li>Hello</li>
       <li>Hello</li>
     </ul>
   </nav>
</div>

CSS

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

#test {
  --top-left: 0 0;
  --top-right: 100% 0;
  --bottom-right: 100% 100%;
  --bottom-left: 0 100%;
  transition: all 0.5s ease;
  clip-path: polygon(var(--top-left), var(--top-right), var(--bottom-right), var(--bottom-left));
  background: red;
  height: 100vh;
  position: relative;
}

#test nav {
  position: absolute;
  width: 100%;
}

JavaScript

$(document).ready(function() {
  function animateClipPath() {
    $('#test').css('--top-left', '0 0');
    $('#test').css('--bottom-left', '0 100%');
    setTimeout(function() {
      $('#test').css('--bottom-left', '20% 100%');
    }, 1000);
    setTimeout(function() {
      $('#test').css('--top-left', '100% 0');
      $('#test').css('--bottom-left', '100% 100%');
    }, 2000);
    setTimeout(function() {
      $('#test').css('--top-left', '0 0');
      $('#test').css('--bottom-left', '0 100%');
    }, 3000);
  }
  animateClipPath();
  setInterval(animateClipPath, 4000);
});