Negative scale value in animation do not work properly. about svg.js

[Fuzzyma]

I just realized that all you basically want is to disable affine transformation.
This is not possible via the scale api but you can just use transform directly:

poly.animate(1000).ease('<>')
        .transform({scale: -0.5, origin: [cx, cy]}, true, false)
        .loop(true, true, 1000)

https://jsfiddle.net/ykns86re/

This should unblock you

[VincentSinel]

Thanks for your quick reply, I don't think I will be able to help , I'm only a hobby programmer (without to much knowledge in JS) and use this library for my own website. But thank's a lot for your solution that just work great !

By the way this library is amazing !

[Fuzzyma]

I debugged into this and the following is happening:

Since you use scale, an affine transformation is done.
Because of how the system works, the transformation is converted to a matrix which is later decomposed back into the affine transformations.
However, decomposition will always favor rotation over flipping and therefore the new affine transforms have a rotation instead of a negative scale.

But hey, why is it not rotating then?
Thats because at some point we set the rotation of the target transform back to its original value which is 0 because you bever specified a rotation. So it gets totally lost.

Whats left is the scale which is then animated.

So now to "how do we fix this?"
We probably need a check to make sure that decomposition has a flag that lets it favor flip instead of rotation.
We could check if the target transform contains any flip or negative scale and set the flag accordingly.

This needs more work and i am not sure if i have the time to fix this.
If you feel you can tackle this yourself, the code in question is in Runner.js

svg.js/src/animation/Runner.js

Line 776 in b30f0d6

transform(transforms, relative, affine) {

The decomposition which would need a flag is in Matrix.js

svg.js/src/types/Matrix.js

Line 153 in b30f0d6

decompose(cx = 0, cy = 0) {

[davelnewton]

Wondering if this is related to using a negative scale value, e.g., -1 to flip x coordinates not rendering the SVG correctly--comes out as 1 instead of negative one.