CODEWITHSUNDEEP
svgsnap.svg
Alex
Alex

Reputation: 5278

Snap SVG - Animating a Path in the opposite direction

I am working on a path animation, but am stuck at how to accomplish it in reverse.

http://jsfiddle.net/t1yu3mcn/1/

Currently, the red path starts at full length, and over time becomes shorter and shorter from the right direction. I want to accomplish the same animation but where the path gets shorter starting from the left direction. (starts disappearing from the left rectangle, and ends disappearing at the right rectangle).

I have tried altering the following snippet inside .animate:

'stroke-dasharray':  val + ' ' + (pathCoverLength - val)

But changing this around to different values never results in the correct effect.

Does anybody know an easy way of accomplishing this?

Upvotes: 1

Views: 977

Answers (1)

Ian
Ian

Reputation: 13852

One way is to juggle the dashOffset point further...

jsfiddle

pathCover.attr({ strokeDasharray: pathCoverLength + ' ' + pathCoverLength })

Snap.animate(pathCoverLength*2, pathCoverLength, function(val) {
    pathCover.attr({
        strokeDashoffset: val  });
}, 7000, mina.ease);

Upvotes: 1

Related Questions