SVG Path animation in horizontal line 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 horizontal menu, which allows us to adding cool effect to the menu. By adding animation, viewers get attention to the movement of line and they knows 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 allow as to drawSVG, morphing, spliting text also can be done.

In this tutorial drawSVG and greensock basic plugin were used.

 

Read also: Button group animaion 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 second menu, starting point – get position of left. Ending point – left + width of 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.

Lets 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

Path can be calculate by width and height of the navigation bar. So get width and height of nav bar amd 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 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