JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

<p>Click anywhere to toggle the menu</p>
<div id="menu" class="menu count count--6 count--delay">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

SCSS

.count {
  --count-total: 0;

  &>:nth-child(1) { --count: 1 }
  &>:nth-child(2) { --count: 2 }
  &>:nth-child(3) { --count: 3 }
  &>:nth-child(4) { --count: 4 }
  &>:nth-child(5) { --count: 5 }
  &>:nth-child(6) { --count: 6 }
  &>:nth-child(7) { --count: 7 }
  &>:nth-child(8) { --count: 8 }
  
  &--1 { --count-total: 1 }
  &--2 { --count-total: 2 }
  &--3 { --count-total: 3 }
  &--4 { --count-total: 4 }
  &--5 { --count-total: 5 }
  &--6 { --count-total: 6 }
  &--7 { --count-total: 7 }
  &--8 { --count-total: 8 }
}

.count--delay {
  --delay-amount: .3s;
  --delay-overlap: .2s;
  --delay-delay: .2s;
}

.menu {
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-delay: calc((var(--count-total) * (var(--delay-amount) - var(--delay-overlap))) + var(--delay-overlap));
  transition-duration: var(--delay-delay);
  transition-timing-function: ease-in;
}

.menu--open {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
  transition-duration: var(--delay-delay);
  transition-timing-function: ease-out;
}

.menu>* {
  --delay-direction: calc(var(--count-total) - var(--count));
  --delay: calc((var(--delay-direction) * (var(--delay-amount) - var(--delay-overlap))) + var(--delay-delay));
  transition-property: transform opacity;
  transition-duration: var(--delay-amount);
  transition-delay: var(--delay);
  transition-timing-function: ease-in;
  transform: translate3d(-1rem,0,0);
  -transform: translate3d(0,calc((var(--count-total) + 1 - var(--count)) * -.5rem),0);
  opacity: 0;
}

.menu:not(.menu--open)>* {
  --delay-delay: 0s;
}

.menu--open>* {
  --delay-direction: calc(var(--count) - 1);
  transform: translate3d(0,0,0);
  transition-timing-function: ease-out;
  opacity: 1;
}


.menu {
  background-color: #f00;
  color: #fff;
  padding: .5rem 0;
  border-radius: .25rem;
  overflow: hidden;
}

.menu>* {
  padding: .5rem 1rem;
  line-height: 1;
}

.menu>*::after {
  content: 'link';
}

JavaScript

document.addEventListener('click',function(){
	menu.classList.toggle('menu--open');
})