SVG Dancing line using GreenSock

Dancing svg line

Hey 🙂 … Welcome to dropinks. In this tutorial, we will play with SVG dancing line. I have an idea to do trampoline in SVG. Before that, I want to do dancing SVG line by changing path data from one value to other using greensock platform by animating SVG line on dragging. On mouse leave line gets back to its position by dancing effect. Let’s see how path data is dancing.

 

Concepts Used

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

How dancing SVG line is working?

To create SVG Dancing line, Greensock animation platform is used. It is done by mouse move and mouse leave. On dragging each pixel by pixel, the path will change depends on dragging direction in Y-axis. On mouse leave, the path value will get back to the original values with the elastic effect. Let see the code…

HTML Markup

<div class=”container”>
<svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” viewBox=”0 0 300 100″ width=”300″ height=”100″ version=”1.0″>
<g>
<path id=”path1″ stroke-linecap=”round” d=”M0,200 C0,200 400,200 400,200″ fill=”none” ></path>
<circle cx=”” cy=”” r=”4″ id=”circle1″ fill=”#fff”/>
<circle cx=”” cy=”” r=”4″ id=”circle2″ fill=”#fff”/>
</g>
</svg>
</div>

SVG

<path id=”path1″ stroke-linecap=”round” d=”M0,200 C0,200 400,200 400,200″ fill=”none” ></path>

CSS

svg{cursor: move;}
path, circle{stroke: #fff; stroke-width: 2px;}

Javascript

Initialize and get SVG DOM element

 var svgElm = $(“svg”),
minDrag = -100,
maxDrag = 100,
svgWt = svgElm.outerWidth(),
svgHt = svgElm.outerHeight(),
startX = 10,
startY = svgHt/2,
endX = svgWt-10,
endY = startY,
cStartX = startX + 40,
cEndX = endX – 40,
toY = startY + 50,
dragPath = “”,
mouseMove = 0,
moveStart = false;

 

On mouse down get an event.pageY, on mouse move update the pageY value to change the path

svgElm.on(“mousedown”,function(event){
var mouseX = event.pageY;
svgElm.on(“mousemove”,function(event){
var mouse_X2 = event.pageY;
moveStart = true;
mouseMove = -(mouseX – mouse_X2);
mouseMove = mouseMove + endY;
dragPath = “M”+startX+”,”+startY+” C”+cStartX+”,”+mouseMove+” “+cEndX+”,”+mouseMove+” “+endX+”,”+endY;
$(“#path1”).attr(“d”, dragPath);
});
});

On moueseleave or mouseup, set initial path value from the current path. Here greensock animation is used. i:mouseMove is the starting value(final drag value of pageY).

i:startY is 0.

ease:Elastic.easeOut.config(0.4,0.1) which helps for dancing effect

svgElm.on(“mouseup, mouseleave”,function(){
if(!moveStart) return;
moveStart = false;
var t1 = new TimelineMax();
t1.to({i:mouseMove}, 1, {i: startY, onUpdate:function(){
val=this.target.i,
$(“#path1”).attr(‘d’, “M”+startX+”,”+startY+” C”+cStartX+”,”+val+” “+cEndX+”,”+val+” “+endX+”,”+endY);
}, ease:Elastic.easeOut.config(0.4,0.1)})
svgElm.off(“mousemove”);
});

 

I hope you like this demo. You can appreciate by sharing it on social media using below section 🙂

If you have any query comment below or mail to dropinksblog@gmail.com

 

You may also like