Wrong transformation SVG <path> with transform + scale

[hirschferkel]

I think the combination e.g. of transformY with scaleX will cause incorrect transformation with anime.js libraries 2-3. Made two fiddles:

https://jsfiddle.net/hirschferkel/9frvkj6q/4/ https://jsfiddle.net/hirschferkel/j8y9zeus/4/

   playAnimationWRONG
        .add({
            targets: '.circleanimate',
            translateY: [-1000, 0],
            scaleX: [0, 1],
            duration: 350,
        })

Both animations should result in a vertikal and horizontal movement and squeeze the ball. Actually it causes a diagonal movement. Is there any way to get the proper translation?

Best, hirschferkel

[hirschferkel]

It seems that the origin of the animation swaps to 0% and 0% of the viewbox while animating both events. Think this is a wrong behaviour.

Splitting the animation may sometimes work, but not in complex animations...

playAnimation
        .add({
            targets: '.circleanimate',
            translateY: [-1000, 0],
            duration: 350,
        })
        .add({
            targets: '.circleanimate',
            scaleX: [0, 1],
            duration: 350,
            offset: '-=350'
        })