SVG Based Hamburger Icon Transition Effect with jQuery and Velocity.js

An animated SVG burger icon that uses jQuery and Velocity.js to create a hamburger icon transition effect for your navigation toggle button.

How to use it:

1. Create a SVG based burger icon.

<button class="js-toggle button">
  <svg height="60" version="1.1" width="60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
    <g>
      <rect height="10" width="60" y="8" x="0" stroke-width="0" fill="#000000" rx="3" />
      <rect height="10" width="60" y="25" x="0" stroke-width="0" fill="#000000" rx="3" />
      <rect height="10" width="60" y="42" x="0" stroke-width="0" fill="#000000" rx="3" />
    </g>
  </svg>
</button>

2. Load jQuery library and the Velocity.js at the end of the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/velocity.min.js"></script>

3. The JavaScript to active the burger icon transition effect on click.

(function(window, document, $, undefined) {
  "use strict";

  $(function() {
      var animOptions = {
          duration: 250,
          easing: "ease-in-out"
      };

      var open = false;

      $(".js-toggle").on("click", function() {
          var $el = $(this);
          var $rects = $el.find("svg rect");

          if ($el.hasClass("active")) {
              $rects.eq(1).velocity("stop").velocity("reverse");
              $rects.eq(0).add($rects.eq(2)).velocity("stop").velocity("reverse");
          } else {
              $rects.eq(1).velocity({
                  opacity: 0
              }, animOptions);

              $rects.eq(0).velocity({
                  transformOrigin: [30, 25],
                  translateY: 17,
                  rotateZ: 45
              }, animOptions);

              $rects.eq(2).velocity({
                  transformOrigin: [30, 25],
                  translateY: -17,
                  rotateZ: -45
              }, animOptions);
          }

          $el.toggleClass("active");
      });
  });

})(window, document, jQuery);

4. Change the color of the burger icon.

.button svg rect {
  fill: #fff;
}

---

This awesome jQuery plugin is developed by lgraubner. For more Advanced Usages, please check the demo page or visit the official website.