I'm trying to create an animated line as if its being drawn from one point to another. I have managed to get the line drawing on to the page but can't work out how to animate it as if it's being drawn?

/

function svgAnimate (){
var s = Snap('#svg');
var linePath = "M-3,148.6c0,0,43.9,7,49.4-17.2c3.5-15.3-9.4-19.7-17.3-13.8c-6,4.4-10,19,11.3,25.4 c24.9,7.5,70.7-31.2,91-61.8S233-41.5,286.3,29.2c0,0-60.7,35.5-24.9,87.9c36.2,53,83.5,15.6,83.5,15.6s19.3,19.5,68.4,17.1";
var lineLength = Snap.path.getTotalLength(linePath);
var lineDraw = s.path(linePath);
lineDraw.attr({
    fill:'none',
    stroke:'#009FE3',
    'stroke-width' :6,
    'stroke-linecap' :'round',
    'stroke-linejoin' :'round',
    'stroke-miterlimit' :10
});
lineDraw.animate({
    stroke : '#fff'
},3000, mina.easein)
console.log(lineLength);
}
svgAnimate();

I'm trying to create an animated line as if its being drawn from one point to another. I have managed to get the line drawing on to the page but can't work out how to animate it as if it's being drawn?

https://jsfiddle/0sdt33dz/

function svgAnimate (){
var s = Snap('#svg');
var linePath = "M-3,148.6c0,0,43.9,7,49.4-17.2c3.5-15.3-9.4-19.7-17.3-13.8c-6,4.4-10,19,11.3,25.4 c24.9,7.5,70.7-31.2,91-61.8S233-41.5,286.3,29.2c0,0-60.7,35.5-24.9,87.9c36.2,53,83.5,15.6,83.5,15.6s19.3,19.5,68.4,17.1";
var lineLength = Snap.path.getTotalLength(linePath);
var lineDraw = s.path(linePath);
lineDraw.attr({
    fill:'none',
    stroke:'#009FE3',
    'stroke-width' :6,
    'stroke-linecap' :'round',
    'stroke-linejoin' :'round',
    'stroke-miterlimit' :10
});
lineDraw.animate({
    stroke : '#fff'
},3000, mina.easein)
console.log(lineLength);
}
svgAnimate();

• javascript
• animation
• svg
• snap.svg

2 Answers 2

You're almost there, just missing two things.

First, you need to set the stroke-dasharray to '<length> <length>', this will create a "dashed" line with gaps/fill equal to the length of the entire line

lineDraw.attr({
    fill:'none',
    stroke:'#009FE3',
    'stroke-dasharray': lineLength + ' ' + lineLength,
    'stroke-dashoffset': lineLength,
    'stroke-width' :6,
    ...

After this you need to animate the offset of the stroke to 0 using stoke-dashoffset

lineDraw.animate({
    strokeDashoffset : 0
},3000, mina.easein)

working fiddle

var s = Snap("#myLine");

//Line parameters (x1, y1, x2, y2)
var line = s.line(30, 45, 30, 45);
line.attr({
    stroke: "#000",
    strokeWidth: 2
});

//Old x2 values is 30 and now it is increasing to 70 with 1 second duration
line.animate({x2: 70}, 1000);

I hope this answer will help you!