We use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

Creative Radial Menu with TweenMax

In Challenges by on Dec 2, 2018

COIDEA - Items - Creative Radial Menu with TweenMax

A creative hamburger navigation system that reveals an animated radial menu when toggled. Navigation comes with ring system which holds navigation items and beautiful animation for hamburger icon itself. It's animated with jQuery and GSAP's TweenMax.js.

Today we would like to give all web developers one beautiful gift for a new year. Yes, already and that is not the last from us! Our creative navigation system contains a fullscreen header section with simple background animation, animated hamburger icon and one powerful animation for navigation items. All that is powered by GSAP's TweenMax.js, jQuery and CSS3. For you, we are prepared SCSS file, too, in case that you what to use this menu with CSS preprocessors.

COIDEA - Creative Radial Menu with TweenMax

Attention: Note that we use modern CSS properties like a "viewport width or height" and "calc" property in this demo.

HTML Structure is simple and contains helper for a header background image, navigation and our hamburger icon which holds our trigger for opening and closing navigation. All menu items hold two extra data attributes for simple customizing of width and height of rings which we hope will help you to speed up your work or just give you a possibility to customize this code better for your needs. HTML Structure can you see here:

<header style="background: URL(path/to/image.jpg) no-repeat center center fixed;">
  <ul class="navigation">
    
    <!-- navigation START -->
    <li data-width="420" data-height="420">
      <a href="#">Home</a>
    </li>
    ...
    <!-- navigation END -->
    
    <!-- navigation:background-helper START -->
    <div class="header-transparent"></div>
    <!-- navigation:background-helper END -->
    
    <!-- navigation:trigger START -->
    <div id="menu-trigger">
      <div id="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div id="close">
        <span></span>
        <span></span>
      </div>
    </div>
    <!-- navigation:trigger END -->
    
  </ul>
</header> 

With SCSS/CSS we made our opening and closing hamburger animations and this SCSS part is pretty simple to understand:

#menu-trigger {
  width: 100px;
  height: 100px;
  top: -34px; left: 50%;
  margin-left: -50px;
  position: absolute;
  cursor: pointer;
  background: rgba(255, 255, 255, 1);
  border-radius: 50%;
  z-index: 1000;
  #hamburger {
    position: absolute;
    height: 100%;
    width: 100%;
    span {
      transition: .25s ease-in-out;
      width: 48px;
      height: 4px;
      position: relative;
      top: 24px;
      left: 26px;
      margin: 10px 0;
      &:nth-child(1) {
        transition-delay: .5s;
      }
      &:nth-child(2) {
        transition-delay: .625s;
      }
      &:nth-child(3) {
        transition-delay: .75s;
      }
    }
  }
  #close {
    position: absolute;
    height: 100%;
    width: 100%;
    transform: rotate(45deg);
    span {
      transition: .25s ease-in-out;
      &:nth-child(1) {
        height: 0%;
        width: 4px;
        position: absolute;
        top: 25%;
        left: 48px;
        transition-delay: 0s;
      }
      &:nth-child(2) {
        width: 0%;
        height: 4px;
        position: absolute;
        left: 25%;
        top: 48px;
        transition-delay: .25s;
      }
    }
  }
  &.open {
    box-shadow: 0 15px 31px rgba(0,0,0,0.08), 0 7px 15px rgba(0,0,0,0.04);
    #hamburger {
      span {
        width: 0%;
        &:nth-child(1) {
          transition-delay: 0s;
        }
        &:nth-child(2) {
          transition-delay: .125s;
        }
        &:nth-child(3) {
          transition-delay: .25s;
        }
      }
    }
    #close {
      span {
        &:nth-child(1) {
          height: 50%;
          transition-delay: .625s;
        }
      }
      span {
        &:nth-child(2) {
          width: 50%;
          transition-delay: .375s;
        }
      }
    }
  }
}

But, as said, main animations for our creative radial menu we made with GSAP's TweenMax.js. As always we created one simple timeline which holds all our animations. On click, we toggle this timeline with a simple function toggleTimeline. As you can see at the bottom of the page, we used functions play() and reverse() and it was enough. Feel free to download this code snippet, check all the codes we wrote to create these awesome navigation animations and use it freely in your next project.

function toggleTimeline() {
  tl.reversed() ? tl.play() : tl.reverse()
}

References and Credits