Sliding Hamburger Navigation With GSAP

Preview:

Description:

A hamburger site/app navigation that pops out a horizontal navigation bar when clicked/tapped.

Built with HTML list, CSS/CSS3, and GSAP 3.

How to use it:

1. Add a nav list together with a hamburger toggle button to the page.

<header>
  <img class="activator" id="activator" src="/path/to/hamburger/" alt="">
  <nav>
    <ul>
      <li><a href="#"><img src="/path/to/icon/"></a></li>
      <li><a href="#"><img src="/path/to/icon/"></a></li>
      <li><a href="#"><img src="/path/to/icon/"></a></li>
      <li><a href="#"><img src="/path/to/icon/"></a></li>
      <li><a href="#"><img src="/path/to/icon/"></a></li>
    </ul>
  </nav>
</header>

2. Add the following CSS snippets to the page.

header {
  display: flex;
}
header .activator {
  padding: 1em;
  border-radius: 100%;
  cursor: pointer;
}
header .activator:hover {
  background: #1e2129;
}
img {
  width: 100%;
  max-width: 45px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav {
  background: #292e38;
  border-radius: 0 5em 5em 0;
  padding: .5em;
  clip-path: ellipse(50% 50% at -50% 50%);
}
nav ul {
  display: flex;
}
nav ul li a {
  display: block;
  padding: .5em;
  margin: 0 .5em;
  border-radius: 50%;
}
nav ul li a:hover {
  background: #323844;
}
nav ul li a img {
  opacity: 0;
  transform: translateX(-10px);
}

3. Load the gsap.js and CSSRulePlugin at the end of the document.

<script src="/path/to/cdn/gsap.min.js"></script>
<script src="/path/to/cdn/CSSRulePlugin.min.js"></script>

4. The necessary JavaScript to activate the hamburger navigation.

var card = document.getElementById('activator');
var tl = gsap.timeline({defaults: {ease: "power2.inOut"}})
var toggle = false;
tl.to('.activator', {
  background: '#805ad5',
  'borderRadius': '5em 0 0 5em'
});
tl.to('nav', {
  'clipPath': 'ellipse(100% 100% at 50% 50%)'
}, "-=.5")
tl.to('nav img', {
  opacity: 1,
  transform: 'translateX(0)',
  stagger: .05
}, "-=.5")
tl.pause();
card.addEventListener('click', () => {
  toggle = !toggle;
  if (toggle ? tl.play() : tl.reverse());
})