SVG Path animation for menus

SVG Path animation in menu

Hey! Today we would like to share a tutorial about Animation in horizontal menus, In most of the websites, navigation menus are used to navigate from one page to other or within a single page website. We did some simple interaction in the horizontal menu, which allows us to add cool effect to the menu. By adding animation, viewers get attention to the movement of line and they know what happenings in the page. Let start how to create path animation in horizontal menus and demo 🙂

How animation is working

It is done by using drawSVG provided by greensock. Greensock is one of the popular animation framework and all animations and allows as to drawSVG, morphing, splitting text also can be done.

In this tutorial drawSVG and greensock basic plugin were used.

 

Read also: Button group animation using SVG

 

About drawSVG

In drawSVG two values are given. From the distance of the path. It will draw from 50 to 100. Same as that, On clicking each menu calculate two values.

For Example: If you are clicking the second menu, starting point – get the position of left. Ending point – left + width of the second menu.  

var tl = new TimelineLite();
tl.to("#element", duration, {drawSVG: [50 100], easing});

Concepts Used

  • HTML
  • Jquery for fetching element
  • Green sock drawSVG animation plugin – plugin links
  • SVG

In this tutorial, Animation is done by Greensock. You can give any number of menus, SVG width and path will create and calculate by javascript.

Let’s see the code structure

 

HTML

<div class="header-pen">
<a href="">SVG Path animation in horizontal line menus
</a></div>
<div class="line-menu" id="line-menu">
<ul class="nav-menu" id="nav-menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
</ul>
</div>
<div class="footer-pen"> For more animations:
<a href="http://www.dropinks.com">www.dropinks.com
</a></div>

 

Basic CSS for horizontal menu

.line-menu{position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.nav-menu{list-style-type: none; padding: 0; margin: 0; overflow: hidden; position: relative; z-index: 1;}
.nav-menu li{float: left; }
.nav-menu li a{display: inline-block; color: #fff; font-size: 22px; text-decoration: none; padding: 10px 15px; border-bottom: 3px solid rgba(255, 255, 255, 0.2);}

 

CSS for SVG and path

svg{position: absolute; left: 0px; top: 0px;}
.path-elm{stroke: #ffffff; stroke-width: 4px;stroke-linecap: round;}

 

Creating SVG and path Element

We can’t use document.createElement instead of that use document.createElementNS. NS-Namespace

var svgElm = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
pathElm = document.createElementNS("http://www.w3.org/2000/svg", "path");

 

Calculate path for attribute

The path can be calculated by width and height of the navigation bar. So get width and height of nav bar and set path.

contWidth = $("#line-menu").outerWidth();
contHeight = $("#line-menu").outerHeight();
offLeft = $("#line-menu").offset().left;
offRight = parseInt(contWidth);

var d_path = "M 0,"+contHeight+" L"+offRight+","+contHeight;
pathElm.setAttribute("d", d_path);
pathElm.setAttribute("id", "path-elm");

 

DrawSVGpath

On each click, Calculate some values are:

  • activeMenuIndex
  • activeMenuOffset
  • activeMenuWidth

and draw a path by giving starting and ending value of the path, drawSVG will play it by changing values of strokeDasharray and strokeDashoffset.

Thank you for reading this tutorial, and if you have any query please comment below.If you like this article share it… 🙂 🙂 🙂 :-p

You may also like