Change the direction of the animation about vivus HOT 2 CLOSED

Hi there,
First, thanks for these kind words :) It's sweet to start an issue with this message.

About your problem. I kept thinking about a hack since this morning and there's no magic solution. I have different ones:

1. Find a way on your SVG editor to ask him to export the path points in the reverse order. Like <path d="4-3-2-1"/> to <path d="1-2-3-4"/>. But I have no idea how to do that, even manually :-/ (I tried but I gave up).
2. Have a custom version of Vivus which allow you to go use negative values in animation timing function.

In vivus.js line 635. Change

progress = this.pathTimingFunction(Math.max(0, Math.min(1, progress)));

to

progress = this.pathTimingFunction(progress);

Then you will be able to use function (x) {return -x} as animTimingFunction.
Check the result on http://maxwellito.github.io/drafts/vivus-issue-66/ (and the code)

Bottom note
I find it curious that your SVG editor exported your path with the points defined in the opposite order of your drawing. Which software do you use?

from vivus.

I had the same problem! I had an SVG where one of the lines was drawing in the correct direction but the other two weren't. I figured it had to be something defined in the SVG file somehow when I exported from Illustrator.

It turns out at least in Illustrator 2024, there's an option to reverse path direction.

Select the path with the regular Selection tool. Then Object menu > Path > Reverse Path Direction. Worked like a charm!!

Thank you for this awesome library!

from vivus.