<div class="iconWrapper">
    <svg viewBox="0 0 100 80">
    <rect class="one disableAnimation" width="75" height="10"></rect>
    <rect class="two disableAnimation" y="20" width="75" height="10"></rect>
    <rect class="three disableAnimation" y="40" width="75" height="10"></rect>
  </svg>
  </div>

  <nav class="navigationWrapper">
    <ul>
      <li><a href="#0">Home</a></li>
      <li><a href="#0">About</a></li>
      <li><a href="#0">Contact</a></li>
      <li><a href="#0">Dance</a></li>
    </ul>
  </nav>

  <div class="waveWrapper">
    <div class="wrapper">
      <img class="thirdWave disableAnimation" src="http://codemenatalie.com/wp-content/uploads/2020/01/wave3.png" />
    </div>
    <div class="wrapper">
      <img class="secondWave disableAnimation" src="http://codemenatalie.com/wp-content/uploads/2020/01/wave2.png" />
    </div>
    <div class="wrapper">
      <div class="box disableAnimation"></div>
      <img class="firstWave disableAnimation" src="http://codemenatalie.com/wp-content/uploads/2020/01/wave.png" />
    </div>
  </div>

.disableAnimation {
  animation: none !important;
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f67280;
  overflow: hidden;

  .iconWrapper {
    position: absolute;
    top: 20px;
    right: 10px;
    z-index: 5;

    svg {
      width: 40px;
      fill: #fff;
      transform-origin: center;

      .one,
      .two,
      .three {
        transform-origin: center;
      }

      .one {
        animation: firstLineShow 0.5s ease-in-out;
      }

      .two {
        animation: secondLineReverse 0.5s ease-in-out;
      }

      .three {
        animation: thirdLineShow 0.5s ease-in-out;
      }
    }

    &.open {
      .one {
        transform: rotate(45deg) translate(8px, 38px);
        animation: firstLineAnimation 0.5s ease-in-out;
      }

      .two {
        transform: scale(0);
        animation: secondLineAnimation 0.5s ease-in-out;
      }

      .three {
        transform: rotate(135deg) translate(15px, 0);
        animation: thirdLineHide 0.5s ease-in-out;
      }
    }
  }

  .navigationWrapper {
    opacity: 0;
    transition: all 0.5s ease-in-out;
    pointer-events: none;
    z-index: 4;

    ul {
      list-style-type: none;

      li {
        text-align: center;
        text-transform: uppercase;
        padding: 0 10px;
        margin: 5px 0;
        font-size: 36px;
        cursor: pointer;

        &:hover {
          a {
            text-decoration: underline;
          }
        }
        a {
          margin: 0 20px;
          color: #fff;
          font-weight: bold;
          text-decoration: none;
          font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        }
      }
    }
    &.open {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .waveWrapper {
    position: absolute;
    top: -20vh;
    height: 120vh;
    width: 100%;
    overflow: hidden;

    .wrapper {
      position: absolute;
      .box {
        background-color: #35477d;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        animation: boxReverse 0.8s forwards linear;

        &.open {
          animation: box 0.8s forwards 0.3s linear;
        }
      }

      img {
        &.thirdWave {
          height: 400px;
          width: 250vw;
          transform: translate3d(50%, -100vh, 0);
          animation: waveThreeReverse 0.9s forwards 0.15s linear;
        }

        &.secondWave {
          height: 200px;
          width: 150vw;
          transform: translate3d(10%, -100vh, 0);
          animation: waveTwoReverse 0.9s forwards 0.1s linear;
        }

        &.firstWave {
          height: 300px;
          width: 200vw;
          transform: translate3d(-60%, -100vh, 0);
          animation: waveReverse 0.9s forwards 0.05s linear;
        }

        &.open {
          &.thirdWave {
            animation: waveThree 0.9s forwards linear;
          }

          &.secondWave {
            animation: waveTwo 0.9s forwards 0.05s linear;
          }

          &.firstWave {
            animation: wave 0.9s forwards 0.1s linear;
          }
        }
      }
    }
  }
}

@keyframes firstLineAnimation {
  0% {
    transform: rotate(0deg) translateY(0);
  }

  50% {
    transform: rotate(0deg) translateY(0);
  }

  100% {
    transform: rotate(45deg) translate(8px, 38px);
  }
}

@keyframes firstLineShow {
  0% {
    transform: rotate(45deg) translate(8px, 38px);
  }

  50% {
    transform: rotate(0deg) translateY(0);
  }

  100% {
    transform: rotate(0deg) translateY(0);
  }
}

@keyframes secondLineAnimation {
  0% {
    transform: scale(1);
  }

  50%,
  100% {
    transform: scale(0);
  }
}

@keyframes secondLineReverse {
  0%,
  50% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes thirdLineShow {
  0% {
    transform: rotate(135deg) translate(15px, 0);
  }

  50% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes thirdLineHide {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(135deg) translate(15px, 0);
  }
}

@keyframes wave {
  0% {
    transform: translate3d(-50%, -100vh, 0);
  }
  100% {
    transform: translate3d(0%, 100vh, 0);
  }
}

@keyframes waveTwo {
  0% {
    transform: translate3d(10%, -100vh, 0);
  }
  100% {
    transform: translate3d(-10%, 100vh, 0);
  }
}

@keyframes waveThree {
  0% {
    transform: translate3d(-60%, -100vh, 0);
  }
  100% {
    transform: translate3d(0%, 100vh, 0);
  }
}

@keyframes waveReverse {
  100% {
    transform: translate3d(-50%, -100vh, 0);
  }
  0% {
    transform: translate3d(0%, 100vh, 0);
  }
}

@keyframes waveTwoReverse {
  100% {
    transform: translate3d(10%, -100vh, 0);
  }
  0% {
    transform: translate3d(-10%, 100vh, 0);
  }
}

@keyframes waveThreeReverse {
  100% {
    transform: translate3d(-60%, -100vh, 0);
  }
  0% {
    transform: translate3d(0%, 100vh, 0);
  }
}

@keyframes box {
  0% {
    height: 0;
  }
  100% {
    height: 120vh;
  }
}

@keyframes boxReverse {
  100% {
    height: 0;
  }
  0% {
    height: 120vh;
  }
}

$(".iconWrapper").click(function() {
  $('rect').removeClass("disableAnimation");
  $('img').removeClass("disableAnimation");
  $('div').removeClass("disableAnimation");
  
  $(".iconWrapper").toggleClass("open");
  $(".box").toggleClass("open");
  $("img").toggleClass("open");
  setTimeout(() => {
    $(".navigationWrapper").toggleClass("open");
  }, 350);
});