Fix scaling of path animations

[Lane]

Scaling for paths was not working for me. If the SVG image was larger than the viewbox, the x / y values would be too large. If the SVG image was smaller than the viewbox, the x / y values would be too small.

Removing the multiplication of the scaling factor has solved this issue.

[juliangarnier]

Can you provide an example where this fails?
The multiplication was supposed to fix this issue.

[cameralibre]

@juliangarnier here's an example: https://codepen.io/cameralibre/pen/BajBVdM

[juliangarnier]

@juliangarnier here's an example: https://codepen.io/cameralibre/pen/BajBVdM

@cameralibre I can't see what's wrong with this example, can you elaborate a bit more ?

[juliangarnier]

This change breaks /documentation/examples/anime-svg-lines-animations.html
Scaling is necessary in some cases, I'll create more test cases

[juliangarnier]

This change breaks the path animation of /documentation/examples/anime-svg-lines-animations.html

@juliangarnier here's an example: https://codepen.io/cameralibre/pen/BajBVdM

@cameralibre I can't see what's wrong with this example, can you elaborate a bit more ?

Sorry I missed the explanation under the demo, very well detailed thank you !

[juliangarnier]

I just committed a change on the v3.2.1 branch that fix this issue without breaking the animation when animating element outside the SVG element.

You can try it here https://github.com/juliangarnier/anime/blob/v3.2.1/documentation/examples/anime-svg-path-animation-responsive.html

[cameralibre]

I just committed a change on the v3.2.1 branch that fix this issue without breaking the animation when animating element outside the SVG element.

You can try it here https://github.com/juliangarnier/anime/blob/v3.2.1/documentation/examples/anime-svg-path-animation-responsive.html

Sorry if this is a stupid question, but what do I need to do to see that linked page?

Here's what I tried (I'm not super experienced with bower/node etc, and I couldn't find any documentation about the website):

1. git clone repository
2. checkout v3.2.1
3. Then I tried opening the file with a browser, but I get a Cross-Origin Request Blocked error, so I guess there's some kind of build step that I need to do (?), but I don't know what or how..?

[juliangarnier]

3.2.1 is out, you can check the live example here : https://animejs.com/documentation/examples/svg-path-animation-responsive.html (The yellow square is part of the SVG element, and is properly scaled, the green one is a div outside the SVG)